1.rem基礎
2.**查詢
3.less基礎
4.rem適配方案
5.蘇寧首頁
1.rem基礎
rem（root em）是乙個相對單位，類似於em，em是相對于父元素字型大小。
不同的是rem的基準是相對於html元素的字型大小
比如：html：設定font-size=12px，非根元素設定width：2rem，則換成px表示就是24px
2.**查詢
media query 是css3新語法
語法規範
@media mediatype and|not|only (media feature)
購物車div
>
body
>
html
>
引入資源link判斷裝置尺寸，引入不同樣式表
html檔案
div3.less基礎
@color：pink；
body
easy less 外掛程式用來把less檔案編譯為css檔案
html檔案
rel=
"stylesheet"
href
="css320.css"
>
head
>
>
>
div>
body
>
@color:red;
div
/*css寫法*/
#header .logo
#header:hover
#header
::after
content:''
;}
//less寫法
#header
&:hover
&::after
}
//less裡面寫
@width:10px + 5;
div//生成的css
div
rem元素大小取值方法：
公式：頁面元素的rem值=頁面元素值（px）rem/ html font-size字型大小=頁面元素的rem值=頁面元素值（px）/（螢幕寬度/劃分的份數）
假設想要的：頁面元素值：100px*100px： div
例子：2rem=(100rem / (750/15))
模板是750px 算出來的是比例2rem
最後 用比例*根據@media得到的當前視窗的html的font-size 就是元素在當前視窗的寬度或高度
方案一：less+**查詢+rem
>
*@media screen and (
min-width
:320px) }
@media screen and (
min-width
:720px) }
divstyle
>
head
>
>
>
div>
body
>
優點：減少**且寬高變化柔和
5.蘇寧首頁
移動端rem布局總結（Reset257）
總結 rem有兩種適配方案 做移動端 學得七七八八，記下來，記下來 一 查詢 1 作用 讓手機端，平板端和電腦端的網頁顯示出不同的css效果。主要是尺寸 大小 2 兩種語法 第一種 表示螢幕尺寸最大值為800px media screen and max width 800px p 表示螢幕尺寸為8...
關於移動端css用rem單位的情況
寫移動端的頁面有一些了 試用過的方法大概總結一下 1 字型大小單位px，寬度寫百分數，高度寫定值px 2 在css中用 media寫 查詢，以iphone6 為分界，字型大小單位用rem，寬度寫百分數，高度盡量用padding，不要給定值 防止使用者在瀏覽器中自動調節字型大小大小，使頁面錯亂 3 就...
移動端布局之REM，以及實際使用總結
整理 的時候發現以前公司內部分享寫的ppt 題記 html的font size num rem 可以等比改變所有以 rem 為單位的元素 1.以rem 為單位，前端切圖，以640尺寸 保證放大的質量 width,height,padding,marging 等切距離，以320的尺寸，也可以以640的...