成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

移動(dòng)端響應(yīng)式

huayeluoliuhen / 801人閱讀

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

0.一些基礎(chǔ)

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

1.常規(guī)情況下js根據(jù)屏幕寬度動(dòng)態(tài)計(jì)算 
!(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.媒體查詢較密集的斷點(diǎn)

使用css3 media query 實(shí)現(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 實(shí)現(xiàn)動(dòng)態(tài)計(jì)算。

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

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

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

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

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

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

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

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

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

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

手淘開源庫

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

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

定寬 。。。

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

viewport縮放；

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

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

網(wǎng)易

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112085.html

相關(guān)文章

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

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

    BLUE 評(píng)論0 收藏0

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

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

    LeoHsiun 評(píng)論0 收藏0

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

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

    smallStone 評(píng)論0 收藏0

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

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

    番茄西紅柿 評(píng)論0 收藏0

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

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

    superPershing 評(píng)論0 收藏0

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

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

    instein 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<