移動(dòng)端的適配

一、rem? 目前大多數(shù)再用的解決方案

1、rem是網(wǎng)頁元素的尺寸單位是相對(duì)單位（可以進(jìn)行等比縮放）

2、px時(shí)間絕對(duì)單位，要實(shí)現(xiàn)適配就要用百分比，但是當(dāng)高度固定的時(shí)候就會(huì)崩潰

3、用 script? 引入flexible.js? 文件? 自動(dòng)適配大部分分辨率? 但是還是需要在固定一個(gè)分辨率下計(jì)算? px 轉(zhuǎn)rem 的數(shù)值

二、less （是一門css屬性預(yù)處理器Less是一個(gè)CSS預(yù)處理器, Less文件后綴是.less）

使用語法

注釋：

l 單行注釋

? ? 語法：// 注釋內(nèi)容

? ? 快捷鍵：ctrl + /

l 塊注釋

? 語法：/* 注釋內(nèi)容 */

快捷鍵： shift + alt + A

單位轉(zhuǎn)換

運(yùn)算：

加、減、乘直接書寫計(jì)算表達(dá)式

除法需要添加 小括號(hào) 或 .

注意：

? 表達(dá)式存在多個(gè)單位以第一個(gè)單位為準(zhǔn)

Less嵌套寫法生成后代選擇器

.+類名{

.+類名 1

}

表示類名1 鑲嵌在類名里

&：配合hover使用

&：：配合為偽元素使用

Less變量設(shè)置屬性值

可以提前把所需要的樣式放在這個(gè)容器里，后續(xù)用個(gè)屬性值時(shí)直接@變量名更改樣式。

語法：

定義變量：@變量名: 值;

使用變量：CSS屬性：@變量名;

Less導(dǎo)入寫法引用其他Less文件

語法：

導(dǎo)入: @import “文件路徑”;

vw 、vh布局

作用：實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果

vw單位尺寸

確定設(shè)計(jì)稿對(duì)應(yīng)的vw尺寸 （1/100視口寬度）查看設(shè)計(jì)稿寬度 → 確定參考設(shè)備寬度 (視口寬度) → 確定vw尺寸 （1/100 視口寬度）

vw單位的尺寸 = px單位數(shù)值 / ( 1/100 視口寬度 )