手機移動web頁面的排版與佈局一點經驗（尺寸單位相容行。）
總之一句話, 儘量用mm 毫米作為標準單位.
總之一句話, 儘量用mm 毫米作為標準單位.
總之一句話, 儘量用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 切圖, 切好的圖在窄屏手機上會出現各種, 換行. 變高.甚至變形的問題.
瀏覽效果完全無法跟美工設計的效果相提並論.
如何做到這種效果呢?
我嘗試了很多種方法. 將一些目前採用的方法經驗分享出來.
以免後來人重複踩坑.
1.百分比法.
一般的百分比都是給寬度設定百分比. 高度 自動.或者定高.一個固定的數值.如果 高度也可以百分比話.就太好 了. 可惜div 預設是沒有高度的. 這是老方法. 本文不做過多介紹.
- 採用新的相對單位 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….
這樣.整個頁面會動態改變比例.真正的平滑的自適應來了….
嗯,這個截至目前發稿. 我還沒試驗過. 歡迎各位試驗一下..
我們有了上方寶劍.但是這個寶劍還有個小問題.
在等比例縮放的時候,會有一個問題.
文字的縮放速度要比圖片的縮放速度要快.
如圖
原因是文字是累加起來的.變化也會累加..
相比之下.如果是2個文字,那麼就依2倍的速度小.(不是嚴格的2倍,領會精神哈)
相比之下.如果是3個文字,那麼就依3倍的速度小.(不是嚴格的3倍,領會精神哈)
相比之下.如果是4個文字,那麼就依4倍的速度小.(不是嚴格的4倍,領會精神哈)
所以採用rem方法佈局頁面的話
切圖的時候要注意,
一. 要麼文字和圖片一起切成圖片.
所以我在這裡建議前端美工們,
一是.儘量採用. 表情字型作為素材藍本..(是儘量,不是一定…)
二是.儘量不要將圖片和字型形成明顯的對比.例如,明顯的將圖示和字型左右對齊.
三是.能單獨用圖片的地方儘量只用圖片.
四是.為了適應不同寬度的手機. 請儘量少出現左右佈局. 多用上下佈局.左右佈局最多不能超過3列. 超過3列的,應該考慮把多的那一列放到內容裡水平顯示.
五是. 想不到了.
哦,最後貼一下,css如何動態改變html的font-size
@media screen and (max-width:750px)
{
html{
font-size:10mm; /*滿屏按照10px來算，最好的寫法是單位為 mm 毫米*/
}
}
@media screen and (max-width:675px)
{
html{
font-size:9mm; /*螢幕等於設計的 9/10, 標準尺寸也縮小到9/10 最好的寫法是單位為 mm 毫米 */
}
}
@media screen and (max-width:600px)
{
html{
font-size:8mm;/*螢幕等於設計的 8/10, 標準尺寸也縮小到8/10 */
}
}
@media screen and (max-width:525px)
{
html{
font-size:7mm;/*螢幕等於設計的 7/10, 標準尺寸也縮小到7/10 */
}
}
@media screen and (max-width:450px)
{
html{
font-size:6mm;
}
}
@media screen and (max-width:375px)
{
html{
font-size:5mm;
}
}
@media screen and (max-width:300px)
{
html{
font-size:4mm;
}
}
.am-container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-left: 0rem;
padding-right: 0rem;
width: 100%;
max-width:75rem;
}如果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,寫死來的更直接.
如下程式碼
<meta name="viewport" content="width=750, initial-scale=1, maximum-scale=1, user-scalable=no">此文章已被我編輯過。 將單位從px更改成了mm。
為何要更改成mm？
mm單位是實際的物理尺寸。這個單位是螢幕的物理尺寸。各種手機都進行過自動把1mm轉換成對應的px。 因為螢幕質量不一樣。好的螢幕在1mm的地方可以放下10個畫素。 差的螢幕1mm只能放3個畫素。用放大鏡看就會看出來。差的螢幕那個畫素特別大。
用mm 單位作為基礎單位。可以做到各種手機瀏覽器的可視尺寸98%一致。
再加上rem的等比縮放功能。 可以說基本上能解決常見的瀏覽器相容問題。
不信你可以拿尺子量一下。 如果某款手機不支援mm。 肯定是那款手機有問題。
下面的程式碼我沒試過。 感覺應該可以。
@media screen and (max-width:75mm) /*這裡也要改成毫米吧。要不要？*/
{
html{
font-size:10mm; /*滿屏按照10px來算，最好的寫法是單位為 mm 毫米*/
}
}
@media screen and (max-width:60mm)
{
html{
font-size:8mm;/*螢幕等於設計的 8/10, 標準尺寸也縮小到8/10 */
}
}