成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端響應(yīng)式

huayeluoliuhen / 754人閱讀

摘要：一些基礎(chǔ)請看這篇的一篇真正教會你開發(fā)移動端頁面的文章二這段代碼是讓布局視口的尺寸等于理想視口。響應(yīng)式工作大，維護(hù)性難縮放天貓，使用布局，字體單位用淘寶，使用庫，是他們自己的一個庫，思想就是根據(jù)去動態(tài)設(shè)置，元素寬高都用。

0.一些基礎(chǔ)

請看這篇：HcySunYang的blog：一篇真正教會你開發(fā)移動端頁面的文章(二)
width=device-width 這段代碼是讓布局視口的尺寸等于理想視口。
設(shè)備像素比（DPR） = 設(shè)備像素個數(shù) / 理想視口像素個數(shù)（device-width）

1.常規(guī)情況下js根據(jù)屏幕寬度動態(tài)計算 
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));
2.媒體查詢較密集的斷點

使用css3 media query 實現(xiàn)；
另可以使用sass的calc（）。

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}
3.強(qiáng)大的單位——vw

使用單位 vw 實現(xiàn)動態(tài)計算。

html {
    font-size: 31.25vw; /* 表達(dá)式：100*100vw/320 */
}

首先，支持 CSS3 calc方法 和 rem、vw單位的瀏覽器下，只需要html {font-size: 15.625vw;}這樣一句就好，另外加個媒體查詢限制下。
不過考慮到國內(nèi)兼容性的問題，還是結(jié)合媒體查詢來使用比較好。（媒體查詢的斷點暫時是借用上面的例子）

4.令設(shè)計尺寸font-size:100px計算出rem，動態(tài)設(shè)置html font-size

1、拿到設(shè)計圖，計算出頁面的總寬，為了好計算，取100px的font-size，如果設(shè)計圖是iPhone6的那么計算出的就是7.5rem，如果頁面是iPhone5的那么計算出的結(jié)果就是6.4rem。
2、動態(tài)設(shè)置html標(biāo)簽的font-size值：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem為單位的頁面總寬 + "px";

如iPhone6的設(shè)計圖就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";

iPhone5的設(shè)計圖就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";

3、做頁面是測量設(shè)計圖的px尺寸除以100得到rem尺寸。
4、和淘寶的做法一樣，文字字體大小不要使用rem換算，而是使用媒體查詢（？？？）
可為什么不用rem呢？后來去查了一番資料，發(fā)現(xiàn)有一種叫做點陣字體的存在（什么是點陣字體），也叫作位圖字體，位圖我們都知道，跟矢量圖是有區(qū)別的，就是放大會模糊，所以點陣字體也是放大會模糊的，如果根據(jù)rem設(shè)置字體大小，字體會自由縮放，可能就會導(dǎo)致點陣字體模糊，所以需要設(shè)定使用幾種固定大小的字體。不過，在正常情況下，系統(tǒng)自帶的字體都是矢量字體，所以使用rem為單位是沒有問題的，除非你的網(wǎng)頁需要用到特殊的點陣字體。
5.lib.flexible

手淘開源庫

總結(jié) 寬度用百分比，高度用rem，字號用rem或媒體查詢，或者直接用手淘開源庫。 !需注意chrome的font-size不能小于12px

流式布局（百分比) 橫向易被拉長，兼容性；

定寬 。。。

響應(yīng)式 工作大，維護(hù)性難；

viewport縮放；

天貓，使用flex布局，字體單位用px

淘寶，使用 flexible 庫，是他們自己的一個庫，思想就是根據(jù)DPR去動態(tài)設(shè)置rem，元素寬高都用rem。這樣就和以前在PC上一樣了，寬高等等都用固定值。

網(wǎng)易

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112085.html

相關(guān)文章

  • Web移動端頁面 --響應(yīng)式和動態(tài)REM

    摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開發(fā)項目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當(dāng)我們在需要兼容移動端的頁面中應(yīng)該盡量少用事件。鄙人最近才剛剛開始學(xué)習(xí)一些關(guān)于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。 響應(yīng)式 什么是響應(yīng)式頁面呢？ 顧名思義響應(yīng)式頁面就是能做...

    BLUE 評論0 收藏0

  • 響應(yīng)式設(shè)計個人的一些總結(jié)

    摘要：所以一個網(wǎng)，甚至是響應(yīng)式設(shè)計，在兩個平臺上都會損害您整體的。三響應(yīng)式與如果把網(wǎng)站作為一個單獨的網(wǎng)站，如果網(wǎng)站的內(nèi)容與桌面版的內(nèi)容相對缺少，導(dǎo)致用戶回到桌面端的網(wǎng)站，會記錄這種選擇，使搜索排名降低，國內(nèi)百度就不知道會怎樣。 一、為什么需要響應(yīng)式設(shè)計（responsible web design） 1. 響應(yīng)式發(fā)展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

    LeoHsiun 評論0 收藏0

  • 談?wù)?em>響應(yīng)式布局

    摘要：今天在這里就略微談一下響應(yīng)式布局吧想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁設(shè)計的基本原則為什么為什么需要響應(yīng)式設(shè)計想必這點不說大家都能想到答案現(xiàn)在是一個移動為先的時代我們要 今天在這里就略微談一下響應(yīng)式布局吧,想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁...

    smallStone 評論0 收藏0

  • 移動優(yōu)先的響應(yīng)式布局

    摘要：雖然兼容性方案的體驗不如常規(guī)方案，但保證了功能可用性移動優(yōu)先的響應(yīng)式布局采用的是漸進(jìn)增強(qiáng)原則，制作響應(yīng)式網(wǎng)站時，先搞定手機(jī)版，然后再去為更大設(shè)備去設(shè)計和開發(fā)更復(fù)雜的功能。前面的話 　　隨著移動互聯(lián)網(wǎng)的興起，不同設(shè)備的分辨率相差較大，如果在不同的設(shè)置上顯示同一個頁面，則用戶體驗差。響應(yīng)式網(wǎng)頁設(shè)計是一種方法，使得一個網(wǎng)站能夠兼容多個終端，而不用為每個終端制作特定的版本。它使得一個網(wǎng)站可以在任何類...

    番茄西紅柿 評論0 收藏0

  • CSS5:移動端頁面(響應(yīng)式)

    摘要：接下來做端一般都寫手機(jī)最大也就先隱藏手機(jī)菜單和按鈕優(yōu)先級問題解決方法直接使用用谷歌開發(fā)者工具查看優(yōu)先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航到航導(dǎo)航導(dǎo)航導(dǎo)航導(dǎo)航方法切換元素的可見狀態(tài)。 CSS5:移動端頁面(響應(yīng)式) 如果手機(jī)端和PC端頁面差別很大,就不要寫響應(yīng)式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關(guān)于判斷是手機(jī)端你...

    superPershing 評論0 收藏0

  • 響應(yīng)式布局開發(fā)

    摘要：目錄移動介紹和兩種開發(fā)方式響應(yīng)式開發(fā)方式原生的開發(fā)方式響應(yīng)式的原理的媒體查詢響應(yīng)式開發(fā)框架的介紹和基本信息優(yōu)勢版本了解框架和庫的區(qū)別主導(dǎo)者不一樣入門起步下載和引包閱讀的文檔了解常用的全局樣式和組件和插件搭建項目目錄結(jié)構(gòu)創(chuàng)建主頁引包設(shè)置網(wǎng) 目錄 移動web介紹和兩種開發(fā)方式(響應(yīng)式開發(fā)方式 原生的開發(fā)方式) 響應(yīng)式的原理(CSS3的媒體查詢) 響應(yīng)式開發(fā)框架(Bootstrap) 的介...

    instein 評論0 收藏0

發(fā)表評論

0條評論

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