移動端布局

2021-09-16 13:11:22 字數 560 閱讀 3690

瀏覽器上 用來顯示網頁的那部分區域了

1、設定

view 有

init-scale 頁面的初始縮放值 為數字

width viewport的寬度

height viewport的高度

mininum-scale 允許使用者縮放最小值

maxinum-scale 允許使用者縮放最大值

user-scalable 是否允許使用者進行縮放

使用rem方案可以做到適配不同螢幕解析度的原理:

設計稿的畫素/html(font-size)=css中的代替px 由於html(font-size)這一部分是根據螢幕的寬度(**查詢可以得到螢幕的寬度)在css內容來動態改變的。

使用css 能在不同的條件下使用不同的樣式,是頁面最終在不同的終端裝置達到不同的渲染效果

@media **型別 and (**特性)

使用的例子:

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

}

同時注意的是 ie8 既不支援html5也不支援 **查詢

移動端布局

預設以寬度為640px的設計稿為基準頁面,然後通過js獲取當前顯示裝置的尺寸,對應的調整 html 標籤的font size大小,從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...

移動端布局

css畫素與裝置畫素 二者的區別在於前者是抽象的,用於瀏覽器渲染頁面,而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口,即可見視口與布局視口,二者的區別在於前者為基於移動裝置螢幕的實際寬度,而後者為...

移動端布局

移動端頁面基本上和web端區別不大 但要考慮到 移動端螢幕尺寸不大並且都是全屏布局 而且 螢幕尺寸都不一樣 所有不能使用網頁的固定尺寸來布局 需要使用百分比來布局 優點 移動端基本都相容h5 css3 所有可以放心的去使用css3的樣式來布局 移動端頁面一般都不大 所以標籤使用的並不多 相對乙個一面...