移動端布局

2021-10-10 19:47:30 字數 1293 閱讀 8834

視口是瀏覽器顯示頁面內容的螢幕區域，


視口可以分為布局視口，視覺視口，理想視口


布局視口layout viewport


移動端預設設定了乙個布局視口980px


視覺視口visual viewport


使用者看到的**區域
這一行什麼意思呢？ viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域，預設的viewport是layout viewport，在進行移動裝置**的開發時，我們需要的是ideal viewport理想視口。width=device-width表示當前的viewpoint等於裝置的寬度，width用來設定layout viewport的寬度，initial-scale=1.0表示頁面的初始縮放值為1，maximum-scale允許使用者的最大縮放值，minimum-scale允許使用者的最小縮放值，user-scalable表示是否允許使用者縮放，「no」不允許，「yes」允許。
1. 物理畫素 就是解析度 iphone8的物理畫素是750


2. iphone8 1px開發畫素 = 2個物理畫素


1. 一張50 * 50px的在手機中開啟，物理畫素會被放大2倍(100 * 100), 造成失真


2. 可以使用倍圖來提高質量，解決在高畫質裝置中的模糊問題


3. 哪乙個100 * 100的，手動把縮小為50 * 50px


4. 我們準備的比我們實際需要的大2倍，這個就是2倍圖


1. 響應式的相容移動和pc


**查詢


bootstarp


2. 只寫移動端


流式布局(百分比布局)


flex彈性布局(強烈推薦)


rem適配布局(flexible.js)


混合布局


1. css初始化normalize.css


官網位址


2. css3盒子模型box - sizing


傳統盒模型 盒子寬度 = width + border + padding


怪異盒模型 盒子寬度 = width裡面包含了border和padding


總結建議 選一種主要技術型別，其他技術作為輔助，混合技術開發

				
移動端布局
預設以寬度為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 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...

				
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...