移動端頁面製做

時間 2019-11-08

標籤移動頁面製做欄目無線简体版

原文原文鏈接

以前常常聽到移動端這個詞，但本身並無真正的編寫過移動端代碼，今天決定仿豆瓣的移動端頁面。移動端的代碼編寫其實不復雜，值得注意的地方有：特殊的meta標籤、百分百比佈局、rem設置字體大小。css

老司機請繞行~html

【特殊的meta標籤】

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

強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；css3

name 屬性的 viewport 值（移動屏幕的縮放）web

viewport 就是除去全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域，這是真正有效的區域。

能夠操做的屬性有 4 個：

width ---------------------– // viewport 的寬度（範圍從 200 到 10,000，默認爲 980 像素）
height --------------------– // viewport 的高度（範圍從 223 到 10,000 ）
initial-scale --------------– // 初始的縮放比例（範圍從 > 0 到 10）
minimum-scale ---------– // 容許用戶縮放到的最小比例
maximum-scale --------– // 容許用戶縮放到的最大比例
user-scalable -----------– // 用戶是否能夠手動縮放 (no，yes)chrome

1 body {
2     min-width: 320px;
3 }

有些安卓系統自帶的瀏覽器並不支持這一條規則，可以對頁面進行放大，一旦放大響應的 box 也隨之放大，致使頁面出現錯亂問題，解決方法：定義頁面的最小寬度；瀏覽器

1 <meta name="format-detection" content="telephone=no" />

使設備瀏覽網頁時對數字不啓用電話功能（不一樣設備解釋不一樣，iTouch 點擊數字爲存入聯繫人，iPhone 爲撥打電話），忽略將頁面中的數字識別爲電話號碼。工具

【百分比佈局】

在寫移動web頁面時，咱們要用百分比佈局來實現自適應屏幕寬度。

若是元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，爲避免出現橫向滾動條，能夠加上box-sizing屬性

1 element{
2         width: 100%;
3         padding-left: 10px;
4         box-sizing:border-box;
5         -webkit-box-sizing:border-box;
6         border: 1px solid blue;
7 }

【rem設置字體大小】

css中的單位：px／em／rem（如下代碼參考於 0101後花園）

px：就是css中最基本的長度單位了，用px作單位基本上沒什麼問題，能夠作到讓頁面按套路精確的展示。但若是全篇用px佈局會暗藏一個問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，所以有磚家倡導使用em替代px。

em：em是相對單位，em相對的基準點就是瀏覽器的字體大小（瀏覽器默認字體爲16px），因此1em默認等於16px。那麼14px＝0.875em; 公式是14/16=0.875em。用em來寫的話，就能夠解決ctrl+，ctrl-時形成的頁面錯亂問題，

經常使用em對照表以下:佈局

有一種簡單的方式，在根節點<html>上重定義基準字號 html {font-size:62.5%} ，此時頁面基準字號就是 16px * 62.5% = 10px , 那麼此時 1em = 10px，那麼此時14px = 1.4em，15px=1.5em這樣就簡單多了。字體

但是，問題又來了，em準確的說是相對於父節點的字號來計算的，若是自身定義了字號那麼就相對自身字號來計算，舉例以下：

1 html { font-size: 100%; }
2 .box-0 {
3     height: 1em; /* 此時height等於16px */
4 }
5 .box-1 {
6     font-size: 0.625em; /* 此時基準字號以變動爲16*0.625=10px */
7     height: 1em; /* 此時實際height等於10px */
8 }

在整個頁面內1em並非一個固定不變的值，1em不停的變換。有了rem就好解決了。spa

rem：rem只相對跟節點<html>計算，只有把根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，默認1rem=16px; 同理你能夠設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。

聲明一下：rem是css3屬性，沒錯！這就是說屌絲ie678不支持rem屬性，只有chrome、firefox等高富帥支持！那麼咱們就在ie678中用px作兼容處理，例如：

1 .box {
2     font-size: 14px; /* 用來兼容ie678 */
3     font-size: 0.875em; 
4 }

寫的很差的地方歡迎指正，謝謝啦！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。