vue 移動端與PC端的響應式布局整理

響應式布局大概就是三種方法：

首先必須在頁面頭部必須有mate宣告的viewport,

**1，**百分比布局。就是margin，padding啥的都是百分比。

**2，****查詢（@media），移動端優先首先使用的是min-width，pc端優先使用的max-width。

3，rem布局，rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size相當於提供了乙個基準。

**4，**視口單位，css3中引入了乙個新的單位vw/vh，與檢視視窗有關，vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：

vw 相對於視窗的寬度，1vw 等於視口寬度的1%，即視窗寬度是100vw

vh 相對於視窗的高度，1vh 等於視口高度的1%，即視窗高度是100vh

vmin vw和vh中的較小值

vmax vw和vh中的較大值

"』viewport』" content=

"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

移動端在index.html裡直接新增js，設定全域性預設字型大小，8px=0.16rem

*

.dom

"viewport" content=

"width=device-width,initial-scale=1.0,user-scalable=0"
>

fnresize()
;window.
onresize
=function()
function
fnresize()
if(devicewidth <=
320)
document.documentelement.style.fontsize =
(devicewidth /
7.5)
+'px';}
<
/script>

在index.html裡直接新增js，設定全域性預設字型大小，8px=0.08rem

function

setrem()
window.
addeventlistener
('load'
, setrem)
;window.
addeventlistener
('resize'
, setrem)
;

移動端與響應式

lang en charset utf 8 name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no documenttitle he...

移動端（響應式）

查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先，不過pc first也可以，只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式，可以根據不同...

移動端與響應式02

一般情況下，乙個專案會劃分為pc端的頁面與移動端的頁面。還有一種，只需要一頁 就可以適應pc端與移動端，比如蘋果的官方 這就需要用到 查詢 media的操作。舉個例子 現在有乙個需求，當為pc大螢幕的時候，d1這個div佔據50 的寬度 當為移動端小螢幕的時候 這裡設定為小於600px d1佔據10...