移動端響應式

huayeluoliuhen 發布于2019-08-29 12:42 / 741人閱讀

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

0.一些基礎

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

1.常規情況下js根據屏幕寬度動態計算

!(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 實現；
另可以使用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.強大的單位——vw

使用單位 vw 實現動態計算。

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

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

4.令設計尺寸font-size:100px計算出rem，動態設置html font-size

1、拿到設計圖，計算出頁面的總寬，為了好計算，取100px的font-size，如果設計圖是iPhone6的那么計算出的就是7.5rem，如果頁面是iPhone5的那么計算出的結果就是6.4rem。
2、動態設置html標簽的font-size值：

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

如iPhone6的設計圖就是：

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

iPhone5的設計圖就是：

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

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

5.lib.flexible

手淘開源庫

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

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

定寬。。。

響應式工作大，維護性難；

viewport縮放；

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

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

網易

GPU云服務器云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112085.html

Web移動端頁面 --響應式和動態REM

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

BLUE 2019-04-23 13:44 評論0 收藏0
響應式設計個人的一些總結

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

LeoHsiun 2019-08-01 15:32 評論0 收藏0
談談響應式布局

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

smallStone 2019-08-29 11:30 評論0 收藏0
移動優先的響應式布局

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

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
CSS5:移動端頁面(響應式)

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

superPershing 2019-08-30 15:53 評論0 收藏0
響應式布局開發

摘要：目錄移動介紹和兩種開發方式響應式開發方式原生的開發方式響應式的原理的媒體查詢響應式開發框架的介紹和基本信息優勢版本了解框架和庫的區別主導者不一樣入門起步下載和引包閱讀的文檔了解常用的全局樣式和組件和插件搭建項目目錄結構創建主頁引包設置網目錄移動web介紹和兩種開發方式(響應式開發方式原生的開發方式) 響應式的原理(CSS3的媒體查詢) 響應式開發框架(Bootstrap) 的介...

instein 2019-08-30 13:53 評論0 收藏0