国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端網(wǎng)頁怎么做?

luoyibu / 3153人閱讀

摘要:移動端網(wǎng)頁最大的特點(diǎn)是什么自適應(yīng)不同尺寸的屏幕高大上的叫法響應(yīng)式知道了自適應(yīng)網(wǎng)頁怎么做豈不是能很好解決問題了那么自適應(yīng)網(wǎng)頁怎么做呢網(wǎng)上關(guān)于這方面的文章有很多,我簡單的整理一下。

移動端網(wǎng)頁最大的特點(diǎn)是什么?自適應(yīng)不同尺寸的屏幕!高大上的叫法:響應(yīng)式!
知道了自適應(yīng)網(wǎng)頁怎么做豈不是能很好解決問題了?那么自適應(yīng)網(wǎng)頁怎么做呢?網(wǎng)上關(guān)于這方面的文章有很多,我簡單的整理一下。

一、 HTML設(shè)置 在head中加入meta標(biāo)簽

簡單解釋一下:
我規(guī)定“頁面寬度 = 屏幕寬度,初始縮放比例為1,允許用戶最大和最小伸縮比都是1,不允許用戶手動縮放”
深入了解 viewport

二、CSS解決方案 解決思路

始終貫徹能用css解決的堅決不用js
那么你想到了什么?媒體查詢!@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式!
有了 @media 根據(jù) 每一個尺寸的屏幕設(shè)計一套樣式表出來?!那豈不是寫到吐血
除了 @media,我們還需要rem來配合使用。
大家應(yīng)該知道em 是相對于父級元素來設(shè)置字體大小的,而我們的rem是相對于根元素的
這一點(diǎn)很重要。所以我們只要在 @media 中設(shè)置不同屏幕尺寸的 根元素的字體大小即可。

步驟一:根據(jù)設(shè)計稿制作標(biāo)準(zhǔn)web頁

我們以iPhone6兩倍設(shè)計稿標(biāo)注來制作網(wǎng)頁。寬度為750px 設(shè)置如下:

 html,body {font-size:100px;}
/* 規(guī)定 1rem = 100px; 
 * 我們就可以根據(jù)這個比例來設(shè)計制作出一套css樣式表布局這個頁面,這個頁面在寬度為750px時就完美顯示了。例如:
*/
header {
    width: 100%;            // 寬度還可以結(jié)合百分百來使用
    height: .98rem;         // 高度為98px
    border-radius: .49rem;  // 圓角為49px
    font-size: .24rem;      // 字體為24px
}
步驟二、@media設(shè)置根元素的字體大小

重點(diǎn)來了,我們只需要使用@media來設(shè)置不同屏幕尺寸的 根元素的字體大小。主流設(shè)備設(shè)置如下:

@media only screen and (max-width:768px),only screen and (max-device-width:768px) {
    body,html {
        font-size: 104px;
    }
}
@media only screen and (max-width:750px),only screen and (max-device-width:750px) {
    body,html {
        font-size: 100px;
    }
}
@media only screen and (max-width:640px),only screen and (max-device-width:640px) {
    body,html {
        font-size: 85.33px;
    }
}
@media only screen and (max-width:600px),only screen and (max-device-width:600px) {
    body,html {
        font-size: 80px;
    }
}
@media only screen and (max-width:540px),only screen and (max-device-width:540px) {
    body,html {
        font-size: 72px;
    }
}
@media only screen and (max-width:480px),only screen and (max-device-width:480px) {
    body,html {
        font-size: 64px;
    }
}
@media only screen and (max-width:414px),only screen and (max-device-width:414px) {
    body,html {
        font-size: 55.2px;
    }
}
@media only screen and (max-width:412px),only screen and (max-device-width:412px) {
    body,html {
        font-size: 54.8px;
    }
}
@media only screen and (max-width:400px),only screen and (max-device-width:400px) {
    body,html {
        font-size: 53.33px;
    }
}
@media only screen and (max-width:375px),only screen and (max-device-width:375px) {
    body,html {
        font-size: 50px;
    }
}
@media only screen and (max-width:360px),only screen and (max-device-width:360px) {
    body,html {
        font-size: 47.8px;
    }
}
@media only screen and (max-width:320px),only screen and (max-device-width:320px) {
    body,html {
        font-size: 42.4px;
    }
}

各尺寸分辨率怎么查看? 請使用谷歌瀏覽器移動端模擬器

主流移動設(shè)備做到這一步基本完成,還有點(diǎn)不夠完美的地方就是這樣要寫很多種屏幕的根元素的字體大小。而且只能寫區(qū)間。

三、JS解決方案 解決思路

css不能解決的問題還是要用js來輔助
css只能設(shè)置某個區(qū)間的樣式,
js可以動態(tài)獲取當(dāng)前設(shè)備的屏幕寬度。根據(jù)當(dāng)前屏幕寬度設(shè)置當(dāng)前屏幕寬度下的根元素字體大小。

步驟一:根據(jù)設(shè)計稿制作標(biāo)準(zhǔn)web頁

同上css解決方案步驟一

步驟二: JS動態(tài)改變根元素字體大小

在頁面中引入下面js代碼

// JavaScript Document
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
        if (clientWidth > 750) {
            docEl.style.fontSize = "100px";// 修正一下大于750的字體大小為100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
        }
      /*
       * 100 -> html,body {  font-size:100px; }
       * 750 -> 此處以 iPhone6 兩倍設(shè)計稿 寬度750px 布局頁面
       * 根據(jù)具體情況改變這兩個數(shù)值
       */
    };

  if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

不需要考慮有多少種設(shè)備分辨率什么的。通過js自動獲取當(dāng)前設(shè)備的clientWidth
,然后根據(jù)設(shè)計好的比例 計算出 根元素的字體大小。完美收工!

四、calc()+vw解決方案 --(更新于2017-12-20) 解決思路

calc(): 用于動態(tài)計算長度值

vw:相對于視口的寬度。視口被均分為100單位的vw

一步到位:根據(jù)設(shè)計稿制作標(biāo)準(zhǔn)web頁

我們以iPhone6兩倍設(shè)計稿標(biāo)注來制作一個按鈕。
寬:402px
高:105px
距離底部:60px
水平居中

css設(shè)置如下:

 html,body {font-size:calc( 100vw / 7.5 )}
/* 
 * 同理 根據(jù)你的設(shè)計稿,寬度為640px的:font-size:calc( 100vw / 6.4 )
 * 規(guī)定 1rem = 100px*; 這樣只是為了方便計算
 * 我們就可以根據(jù)這個比例來設(shè)計制作出一套css樣式表布局這個頁面,例如:
*/
 .btn{
    position: absolute;
    bottom: 0.6rem; // 0.6 = 60/100 
    left:50%;
    margin-left: -2.01rem;
    width:4.02rem;  // 4.02 = 402/100 
    height: 1.05rem; // 1.05 = 105/100 
 }
/*
 * 假設(shè)你原有的項目中已經(jīng)設(shè)置了在iPhone 6 的時候 1rem 代表 20px
 * css設(shè)置如下即可
*/
 html,body {font-size:calc( 100vw / 18.75 )};
 .btn{
    position: absolute;
    bottom: 1.5rem         // 1.5 = (60/20)/2 
    left:50%; 
    margin-left: -5.025rem; 
    width:10.05rem;        // 10.05 = (402/20)/2 
    height: 2.625rem;     // 2.625 = (105/20)/2 
 }
說明:此解決方案僅適用于移動端支持calc和vw的瀏覽器

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84711.html

相關(guān)文章

  • 小技巧|移動網(wǎng)頁調(diào)試神器Eruda使用技巧

    摘要:做移動端開發(fā)的一大痛點(diǎn)就是,在真機(jī)運(yùn)行下無法查看日志和其他信息如網(wǎng)絡(luò)請求顯示本地存儲等信息。是一個專為手機(jī)網(wǎng)頁前端設(shè)計的調(diào)試面板,類似的迷你版,其主要功能包括捕獲日志檢查元素狀態(tài)顯示性能指標(biāo)捕獲請求顯示本地存儲和信息瀏覽器特性檢測等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移動端Web開發(fā)的一大痛點(diǎn)就...

    xzavier 評論0 收藏0
  • 移動h5頁面適配

    摘要:一直對頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實際情況卻并非如此理由如上但在移動設(shè)備上,必須弄明白這點(diǎn)。其他品牌的移動設(shè)備也是這個道理。 一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發(fā)現(xiàn)直接照抄網(wǎng)上的方案是很容易,但是想真的了解內(nèi)部的原理,這就給我了一個下馬威了.通過在網(wǎng)上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識,如有問題,歡迎指正! 在開始...

    張率功 評論0 收藏0
  • 移動適配】移動Web怎么屏幕適配(一)

    摘要:屏幕適配是一個很容易被忽略的問題,但對于精益求精的產(chǎn)品而言,是必不可少的。對于開發(fā)的求職者而言,也是一個必需要理解清楚的經(jīng)典問題文啃先生壹移動端適配的是什么我們討論的是網(wǎng)頁適配多種尺寸屏幕,讓網(wǎng)頁效果看起來和設(shè)計師的設(shè)計稿一樣。 屏幕適配是一個很容易被忽略的問題,但對于精益求精的產(chǎn)品而言,是必不可少的。對于Web開發(fā)的求職者而言,也是一個必需要理解清楚的經(jīng)典問題 文 | 啃先生 Mar...

    huangjinnan 評論0 收藏0
  • multipages-generator今日發(fā)布?!媽媽再也不用擔(dān)心移動h5網(wǎng)站搭建了!

    摘要:本文適合的讀者現(xiàn)在在手淘,京東,今日頭條,美柚等過億用戶的手機(jī)中的,都常見網(wǎng)頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個的例子手淘,美柚。 本文適合的讀者??????? 現(xiàn)在在手淘,京東,今日頭條,美柚等過億用戶的手機(jī)app中的,都常見h5網(wǎng)頁,他們有更新快,靈活,便于分享和傳播的特性。這里有他們中的幾個h5的例子:(手淘,美柚)。這些app中都嵌者數(shù)以百計,千計的...

    xavier 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<