日本福利片高清在线观看_韩国伦理嫂子_HD中文字幕在线播放,韩国电影全集,特殊精油按摩8,年轻的嫂子2电影

您需要AI互聯(lián)網(wǎng)
顧問提供專業(yè)咨詢
AI人工智能 · VR · AR · 智慧博物館 · 智慧公園 · 景區(qū) · 文創(chuàng) · 動畫 · 游戲 · 年度運營
大模型定制 · WEB3 · 元宇宙 · 區(qū)塊鏈 · 高端網(wǎng)站建設(shè) · 小程序 · APP · 微信 · H5 · 電商
HTML5網(wǎng)頁設(shè)計自適應(yīng)手機的方法
2019.04.02

一般用現(xiàn)在常用的開發(fā)框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..當(dāng)然可能還有一些移動端開發(fā)的框架。

移動頁面自適應(yīng)手機屏幕的方法；
  1，  利用meta標(biāo)簽

    Meta標(biāo)簽主要用來描述一個HTML網(wǎng)頁文檔的屬性，如作者、日期時間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁利于搜索引擎。

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    解釋：Viewport指用戶網(wǎng)頁的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

    以上標(biāo)簽只支持一種尺寸，正確的做法是用js動態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。

    <script type="text/javascript">

    var phoneWidth =  parseInt(window.screen.width);

    var phoneScale = phoneWidth/640;

    var ua = navigator.userAgent;

    if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);

    if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

    else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

    else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

     </script>
 2，  百分比法

    CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。


 3，   使用CSS3單位rem

    在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設(shè)寬度為W，一個div在寬度為640px的設(shè)計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

    計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

    所以會在頭部加上這個JS代碼：

    <script type="text/javascript">

       var html = document.querySelector(‘html‘);

       var rem = html.offsetWidth / 6.4;

       html.style.fontSize = rem + "px";
 4，  媒體查詢

    媒體查詢正是為解決網(wǎng)頁適應(yīng)手機屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。




400-6446-365 / 010-64928252 我想要個更針對我需求的方案
讓決策變的簡單
好的開始是成功的一半
請輸入關(guān)鍵字