px是乙個絕對單位,不管螢幕怎麼變化,大小固定;
rem是乙個相對單位,相對於html的font-size大小設定的;
根據螢幕大小設定html的fontsize;
一般設計稿預設的html的fontsize是100px,因為比較好計算;
fontsize最小值是12px,所以不能是10px;
寫css樣式的時候只需要將設計稿的值除以100,變成rem單位即可;
在js中加上
var假設設計稿定義寬度是640;w
=document
.documentelement.clientwidth||document
.body.clientwidth;
var
dw
=640
;document
.documentelement.style.fontsize=w
*100
/dw
+"px;"
這樣就會根據螢幕大自動設定html的fontsize了;
pc端的話瀏覽器視窗會發生變化,所以要加在window.onresize事件中,只要瀏覽器視窗發生改變就重新計算fontsize的值;
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習筆記之 z index屬性》
z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。由此圖可以顯而易見的，z index越大越靠前，z i...