第131天：移動web頁面的排版與佈局

1、總之一句話, 儘可能用mm 毫米做爲標準單位.

採用新的相對單位 rem 首先設置html的 font-size 爲根大小. 

html{ 
font-size:1mm; 
} 
.titleheight{ 
height:10rem; //這裏等於10mm 
width:11rem; //這裏等於11mm 
}

當 
html{ 
font-size:2mm; 
}

.titleheight{ 
height:10rem; //這裏等於20mm 
width:11rem; //這裏等於22mm 
}

其它地方用rem作單位.

html4 的瀏覽器時代, 一致都是用px來做爲標準單位的. 
自從有了手機之後, html的單位又變得混亂了起來. 自適應變的很是困難. 
咱們公司 . 美工設計的寬度標準是750px 
全部的手機移動頁面所有按照 750px 設計出圖. 
在瀏覽器上若是按照750px 切圖, 切好的圖在窄屏手機上會出現各類, 換行. 變高.甚至變形的問題. 
瀏覽效果徹底沒法跟美工設計的效果相提並論.

如何作到這種效果呢?

2、百分比法.

通常的百分比都是給寬度設置百分比. 高度 自動.或者定高.一個固定的數值.若是 高度也能夠百分比話.就太好 了. 惋惜div 默認是沒有高度的. 

1. 採用新的相對單位 rem

rem 單位是相對 html 的font-size 來計算的.

若是html的 font-size = 10px 
那麼 
1rem = 10px 
2rem = 20px 
同理750px = 75rem

若是html的 font-size = 12px 
那麼 
1rem = 12px 
2rem = 24px 
同理 62.5rem = 750px

反過來說. 
美工按照750px 設計的圖. 到了675px的屏幕上. 
尺寸就應該響應縮小到 9/10; 
也就是說, 原來75rem的圖片. 應該顯示成 67.5rem 纔對. 
可是咱們不能每一個元素都根據界面寬度動態改尺寸長度.

根據rem的規則.咱們能夠動態修改html 的 font-size 的大小. 
原先750px 映射到10px 上, 每一個px 承載了 75 個px的寬度變化.

文字沒法描述清楚,仍是上圖吧.3張圖.一看就清楚了.一圖勝千文

因此寫到這裏大概也明白了.

html 的font-size = 美工出圖寬度px 的時候.你按照老的方法,切圖使用ps工具測量的px 徹底等於 rem 能夠隨便互換.

若是屏幕尺寸變小了. html的font-size 也跟着變小. 那麼你的圖片也跟着等比例變小.

推理下去,有點使人吃驚. html的font-size 通常要 = 750px 了.

不過我目前的頁面採用的是 html 的font-size = 10px; 
font-size=750px 我還沒試過.

10px很明顯的缺點是梯度過高,平滑度不夠好. 
20px勉強能夠接受 
30px又很差算. 
40px好像還能夠接受,平滑度,和單位換算都還能夠..

可是實際使用中最好用的仍是 1px = 1rem 而後用javascript 根據屏幕的寬度動態計算html 的font-size

採用rem方法佈局頁面的話 
切圖的時候要注意, 
一. 要麼文字和圖片一塊兒切成圖片.

二. 要麼,採用時下流行的表情字體..例如.Entypo字體 

因此我在這裏建議前端美工們,

一是.儘可能採用. 表情字體做爲素材藍本..(是儘可能,不是必定…)

二是.儘可能不要將圖片和字體造成明顯的對比.例如,明顯的將圖標和字體左右對齊.

三是.能單獨用圖片的地方儘可能只用圖片.

四是.爲了適應不一樣寬度的手機. 請儘可能少出現左右佈局. 多用上下佈局.左右佈局最多不能超過3列. 超過3列的,應該考慮把多的那一列放到內容裏水平顯示.

五是. 想不到了.

最後貼一下,css如何動態改變html的font-size

 1 @media screen and (max-width:750px) 
 2 {
 3     html{
 4         font-size:10mm; /*滿屏按照10px來算，最好的寫法是單位爲 mm 毫米*/
 5     } 
 6 }
 7 @media screen and (max-width:675px)
 8 {
 9 
10     html{
11         font-size:9mm; /*屏幕等於設計的 9/10, 標準尺寸也縮小到9/10 最好的寫法是單位爲 mm 毫米 */
12     } 
13 }
14 @media screen and (max-width:600px)
15 {
16     html{
17         font-size:8mm;/*屏幕等於設計的 8/10, 標準尺寸也縮小到8/10  */
18     } 
19 }
20 @media screen and (max-width:525px)
21 {
22     html{
23         font-size:7mm;/*屏幕等於設計的 7/10, 標準尺寸也縮小到7/10  */
24     } 
25 }
26 @media screen and (max-width:450px)
27 {
28     html{
29         font-size:6mm; 
30     } 
31 }
32 @media screen and (max-width:375px)
33 {
34     html{
35         font-size:5mm;
36     } 
37 }
38 @media screen and (max-width:300px)
39 {
40     html{
41         font-size:4mm;
42     } 
43 }
44 
45 
46 .am-container {
47     -webkit-box-sizing: border-box;
48     box-sizing: border-box;
49     margin-left: auto;
50     margin-right: auto;
51     padding-left:  0rem; 
52     padding-right: 0rem; 
53     width: 100%; 
54     max-width:75rem;
55 }

若是html font-size = 750px 
1rem = 750px 
因此,咱們在使用的時候.

美工出圖750px, 咱們在代碼裏面得寫成 1rem 
美工出圖75px, 咱們在代碼裏面得寫成 0.1rem 
問: 美工出圖10px = 咱們的代碼裏面得寫多少 rem?

估計要拿計算器了. 很差算. 
因此爲了計算方便. 建議仍是使用 
font-size= 10px 或者 
font-size=100px

這樣咱們根據美工出圖的寬度除以10 或者100就是對應的rem

爲了平滑起見 html 的 font-size = 100px 最好.

並且網上看到有人說,大多數瀏覽器font-size的最小值爲12px，因此只能用100了。嗯,爲了安全起見100px 彷佛更合適.

最後在上另一個問題., 上面的方法只是解決了如何動態的適應不一樣的寬度的設備. 
可是如何適應不一樣分辨率的設備呢?

一樣的頁面,在不一樣分辨率的手機上. 顯示效果是不同的.

例如: 下圖.

指定分辨率會使得這種狀況有所改善. 
通過手動測試發現 . target-densitydpi=250 比較適合各種瀏覽器. 
固然更好的辦法是. 用js動態去建立viewport 這個標籤.

可是這種改變分辨率的方法不太好.控制 
不如直接把width=750,寫死來的更直接. 
以下代碼

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

3、爲什麼要更改爲mm？ 
mm單位是實際的物理尺寸。這個單位是屏幕的物理尺寸。各類手機都進行過自動把1mm轉換成對應的px。 由於屏幕質量不同。好的屏幕在1mm的地方能夠放下10個像素。 差的屏幕1mm只能放3個像素。用放大鏡看就會看出來。差的屏幕那個像素特別大。

用mm 單位做爲基礎單位。能夠作到各類手機瀏覽器的可視尺寸98%一致。 
再加上rem的等比縮放功能。 能夠說基本上能解決常見的瀏覽器兼容問題。 
不信你能夠拿尺子量一下。 若是某款手機不支持mm。 確定是那款手機有問題。

下面的代碼我沒試過。 感受應該能夠。

 1 @media screen and (max-width:75mm) /*這裏也要改爲毫米吧。要不要？*/ 
 2 {
 3     html{
 4         font-size:10mm; /*滿屏按照10px來算，最好的寫法是單位爲 mm 毫米*/
 5     } 
 6 }
 7 @media screen and (max-width:60mm)
 8 {
 9     html{
10         font-size:8mm;/*屏幕等於設計的 8/10, 標準尺寸也縮小到8/10  */
11     } 
12 }