移動web開發與適配

2021-08-23 14:03:03 字數 925 閱讀 3088

1.定高,寬度百分比

2.flex布局

3.**查詢

@media **型別 and (**特性)
**型別:screen、print

**特性:max-width 、max-height

demo:

@media screen and (max-width:320px)

}@media screen and (min-width:321px)

}/*當螢幕寬度大於等於321時樣式才生效*/

style>

@media screen and (max-width:320px)

}@media screen and (min-width:321px)

}

也可以這樣寫入:(一般不用)

"stylesheet"

type="text/css" href="" media="screen and (max-width:320px)">

rem簡介

rem即fontsize of the root element

1rem=根元素字型大小(chrome下預設16px)

應用:

使用css和**查詢來根據螢幕大小設定不同的根元素 font-size

@media screen and (max

-width:360px)and (min

-width:321px)

}@media screen and (max

-width:320px)

}

移動web開發適配

一.設定html 預設字型大小 1,document getelementsbytagname html 0 style.fontsize window innerwidth 10 px 2.var htmlwidth document.documentelement.clientwidth doc...

rem筆記與移動web開發適配

rem原理與簡介 常見移動web適配方法 pc 移動web media query 查詢 media 型別 and 特性 型別 screen,print 特性 max width,max height rem font size of the root element 適配原理 相容性 1rem 瀏...

移動端web適配

移動端web適配我了解的總共有4種方法 首先在做移動端開發的時候一定會加上viewport name viewport content width width device,initial scale 1 minimum scale 1,maximum scale 1,user scalable n...