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

時間 2019-11-09

標籤 web 移動頁面響應動態 rem 欄目 HTML 简体版

原文原文鏈接

鄙人最近纔剛剛開始學習一些關於移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。javascript

響應式

什麼是響應式頁面呢？

顧名思義響應式頁面就是能作出響應的頁面，它的頁面效果不是定死的，會隨着用戶的改變而改變。css

如何着手響應式有如下幾個思考的方向html

找一份設計圖
使用Media Query
隱藏元素
添加meta viewport
明白手機端交互方式的區別

Media Query

是什麼

Media query 翻譯過來就是媒介查詢，媒介就是咱們查看這個網頁的設備。
媒介查詢源於CSS3，它能夠根據用戶的設備所具備的某些特徵，來提供不一樣的樣式用於顯示。前端

用法

引用方式

它的引用方式一共有兩種java

元素中媒介查詢
樣式表中媒介查詢

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  body{
        background: red;
    }
}
</style>

在link中使用媒介查詢後，即便不知足樣式條件，這個樣式文件依然會被下載。web

條件判斷

媒介查詢的條件判斷的邏輯操做符只有and, only, not三種，多個判斷條件用()包裹後操做符隔開。chrome

//當媒介最大寬度爲800px且是橫屏時裏面的樣式生效
@media (max-width: 800px) and (orientation: landscape){
    ......
}

Mobile First

目前web前端開發項目類型能夠分爲兩種方式，Mobile First 和 Desktop First。Mobile First就是優先開發移動端後開發PC端，後者反之。後端

不一樣的Fist中咱們Media Query針對的也不一樣，Mobile First中，由於咱們以移動端爲主，因此咱們的Media Query應該是針對PC的條件去控制，Desktop Fist則針對移動端設置條件樣式。瀏覽器

Mobile First Demo工具

這裏就用到了一開始所說隱藏

meta viewport

如今，你已經寫好了你的響應式網頁，那麼已經能夠了嗎？
別急，你離完成僅剩最後一步。

因爲歷史的緣由，咱們的手機在訪問網頁時，無論你是響應式網頁仍是非響應式，瀏覽器都會將你的寬度改成980px。

這是歷史遺留的問題，由於最先的智能手機爲了完整的顯示一個網頁，直接將PC上的網頁縮放塞進手機瀏覽器中，通過調研，發現大部分的網頁都是980px左右，因此當咱們用手機訪問網頁時寬度都會被縮放到980px。

咱們只須要加上這樣一行代碼就能夠解決問題

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

width=device-width設置頁面寬度爲設備寬度。
user-scalable=no不容許用戶縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0最大最小默認縮放比例都爲1。

這樣咱們的響應式網頁才徹底生效了。

移動端特色

沒有hover
有touch
沒有滾動條
沒有IE
沒有resize

由於移動端是沒有hover事件的因此當咱們在須要兼容移動端的頁面中應該儘可能少用hover事件。
移動端通常不多監聽click事件，都是以touch事件爲主，JS沒有滑動事件，可是能夠經過touch事件模擬
沒有IE意味着咱們能夠隨心所欲放飛自我，使用最新的CSS和HTML。

爲何須要響應式？

當咱們須要給不一樣的設備顯示不一樣網頁（樣式）時，爲何不能夠一開始就寫好多個網頁再由後端負責根據用戶設備來跳轉呢？

咱們寫響應式須要思考很是多的問題，在一個頁面裏html css須要考慮不少判斷邏輯，這些多出來代碼以及設計的時間可能已經可以寫一個新的網頁，那爲何不一開始就寫兩個網頁就行了呢？

確實，如今大部分互聯公司如今幾乎都不會去使用響應式頁面。

博客園：響應式
百度：非響應式
谷歌：非響應式
淘寶：非響應式
頭條：非響應式
知乎：非響應式

國內大型公司能夠說基本上都是非響應式網頁，只有那些交互性較弱好比我的blog，小型企業站點以展現內容爲主的網站還會應用響應式設計。

動態REM自適應

在瞭解rem以前須要先知道

瀏覽器的默認font-size是16px
Font-size最優先用戶在瀏覽器中設置的大小，chrome默認最小12px。

什麼是rem？

rem是衆多number單位中的其中一個，它的值爲根元素font-size的值。

<style>
    body{font-size: 40px;}
    p{font-size: 2rem;}
</style>
<body>
  <p>hello</p>
  word
  <div>!!</div>
</body>

由於給body標籤設置了40px，因此body裏面的內容應該都是40px。可是因爲p在後面優先設置了2rem，瀏覽器的默認font-size爲16px，也就是html標籤的font-size就是16px，因此如今的hello是32px。

也就是說rem的根元素的值指的就是html 的font-size的值。

rem有什麼用？

上面扯了那麼多介紹rem，那確定是有用的。
別急，讓我細細道來。
當咱們拿到設計稿，須要寫一個手機用的網頁時。

咱們是但願在全部的手機上看到的頁面都是一個樣子的，頁面內每一個元素在固定的位置。可是按照常規方法，一個樣式能作到讓全部手機完美（90%）還原設計稿的樣子嗎？

答曰：能夠，用media寫響應式，針對不一樣的設備寬度，展示不一樣的樣式。

好的，那讓咱們打開開發者工具模擬手機看看。

iPhone X : 375 x 812
iPhone 6/7/8 Plus : 414 x 736
iPhone 6/7/8 : 375 x 667
iPhone 5/SE : 320 x 568
Galaxy S5 : 360 x 640
Pixel 2 : 411 x 731

看到這些你還想用media嗎？你要寫多少個media？光是一個iPhone就能夠搞死你更別說還有一堆的國產機等着你適配。

那怎麼辦呢，有沒有辦法可讓一個CSS適應「全部」的手機呢？

辦法確定有，那就是自適應，咱們不須要知道用戶的手機的長寬是多少，咱們讓網頁本身匹配用戶的手機長寬就行了啊。

自適應佈局

自適應佈局有下面兩種常規方法

百分比佈局：寬度百分比。
縮放佈局：按比例設置網頁寬高。

這兩個佈局一個百分一個比例看上去意思是同樣，其實否則。百分比佈局中的寬度樣式不是一個具體的值，而縮放是在已知寬度的狀況下定死的值。

/*device-width = 320*/
body{
    width: 50%  /*160px*/
}
body{
    width: 160px /*160px*/
}

若是咱們的目的是在手機上展示body佔據屏幕一半的效果的話，上面兩種寫法在寬度爲320px的手機上效果是同樣的，都是將body的寬度設置爲手機的一半長。
如今只是在寬度爲320px的手機上展示了1/2的效果，那麼當咱們的手機是寬度300px的時候呢？

/*device-width = 300*/
body{
    width: 50%  /*150px*/
}
body{
    width: 150px /*150px*/
}

若是是百分比佈局是否是不須要改動，而按比例佈局須要改動。

那麼百分比佈局能解決問題嗎？

不行，百分比佈局有個缺陷，高度是未知的，由於高度沒有辦法百分比，若是定死了高度那麼就沒有辦法與寬度適應了。一旦咱們的頁面一複雜，未知的高度會帶來更多的問題。

總的來講咱們的頁面須要靠寬度適配，再用這個寬度來決定自身的高度以達到寬高都成比例，在不一樣的手機上均可以按一樣的比例展示。

那有什麼方法能夠準確獲取手機的寬度嗎？

這時咱們的英雄登場了，rem。

上面說到rem是根元素font-size的值，那麼咱們只須要將根元素html的font-size爲手機的寬度，這時不就能夠經過rem來設置有比例的寬高樣式了嗎。

rem怎麼用？

動態REM demo

var width=document.documentElement.clientWidth;
    document.write(`<style>html{font-size:${width / 10}px}</style>`)

JS代碼就兩行，將rem設置爲手機寬度的的10%，雖然設置width / 100能夠徹底模擬vw（自適應不用vw是由於vw兼容性太差了），可是當em爲1%時，一但寬度小於120px時，font-size就會小於12px，低於chrome默認的最小font-size就會出現bug，因此咱們設置rem爲10%。

還須要注意的是雖然width和height是用rem使用，可是不表明別的大小也須要用rem（若是字體的font-size也用rem，那當寬度很小時，字會小的看不清），咱們應該搭配別的單位以得到更美觀的效果。

使用SCSS自動轉換px

爲了減小咱們計算量，咱們能夠直接使用scss寫一個function幫咱們解決轉換的問題。

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640。

.box{
  background: grey;
  width: px(256);
  height: px(128);
  margin: px(32) px(32);
  float: left;
}