響應(yīng)式
1.meta：vp阻止縮放
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width記住viewport是視口
user-scalable =no禁止用戶縮放
initial-scale=1.0初始縮放倍數(shù)1.0
2.盡量不要寫width/height,改用max/min
不要把寬高寫死，使用最小寬度和最大高度
3.flex布局
盡量使用flex布局
4.media query
盡量使用媒體查詢，給不同的寬度，使用不同的樣式
移動(dòng)端和PC端的一些區(qū)別
- 沒有hover 所以盡量少使用hover,可以在PC端改為移動(dòng)端時(shí)少修改代碼
- 有touch事件 移動(dòng)端是可以觸摸的，所以需要使用touch觸摸監(jiān)聽
- 沒有resize 移動(dòng)端的寬高無法更改，寬高為設(shè)備的寬高
- 沒有滾動(dòng)條
- **移動(dòng)端需要設(shè)置滑動(dòng)事件 原生js沒有滑動(dòng)事件，包括jQuery，Vue等框架都封裝的有swipe事件可以實(shí)現(xiàn)滑動(dòng)效果
動(dòng)態(tài)rem 非響應(yīng)式的移動(dòng)端開發(fā)
動(dòng)態(tài)rem不是響應(yīng)式 只針對移動(dòng)端方案
原因：手機(jī)尺寸問題，長寬高不相同
px:像素
rem :root em 表示根元素的font-size，根元素一般指<html></html>
em:一個(gè)”M“的寬度(一個(gè)漢字的寬度）
vh:viewport height ,50vh表示視口高度的一半
vw:viewport width,50vw表示視口寬度的一半
- 網(wǎng)頁中：一般默認(rèn)字體寬度為16px
在chrome瀏覽器中，默認(rèn)最小字體大小為12px設(shè)置更小的字體大小也不會(huì)有任何效果
手機(jī)瀏覽器不會(huì)限制最小值
關(guān)于rem和em
html{
font-size:32px;//相對于html的font-size
}
body{
font-size:16px;
height:2em; //此時(shí)高度為32px
height:2rem://此時(shí)高度為64px
為什么使用動(dòng)態(tài)rem
在PC端中方網(wǎng)頁可知道大概要寫多少寬度的，在移動(dòng)端，每款手機(jī)屏幕分辨率不一樣，寬度的大致范圍在300px和500px之間，細(xì)微的差別是很明顯的，只要沒做好適配，就很難優(yōu)雅的向用戶展示網(wǎng)站效果
動(dòng)態(tài)rem就是保持每個(gè)元素的寬高比例不變，根據(jù)設(shè)備的寬高將元素整體放大或縮小
動(dòng)態(tài)rem的使用
- 動(dòng)態(tài)rem的思路：一切單位以設(shè)備寬度為基準(zhǔn)，保證完美的還原設(shè)計(jì)稿
- css中我們無法獲得當(dāng)前設(shè)備的寬度，所以需要在JS中寫
可以在JS中寫10rem = 1pageWidth
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
- 注意：比如font-size，border之類的值比較小了，建議使用px像素，rem和px是可以混用的
