CSS響應式布局學習筆記（多種方法解決響應式問題）
在做web開發的工作中，會遇到需要我給頁面根據設計的要求，進行響應式布局，這里跟大家分享下我對于響應式布局的解決方法：
我主要利用的是CSS3 媒體查詢，即media queries，可以針對不同的媒體類型定義不同的樣式，從而實現響應式布局 。也可以針對不同的分辨率設置不同的樣式。
在實際操作中，我們使用到的代碼有：
@media all 用于所有設備 print 用于打印機和打印預覽。 screen 用于電腦屏幕，平板電腦，智能手機等。 speech 應用于屏幕閱讀器等發聲設備。 orientation:portrait : 豎屏 orientation:landscape : 橫屏 注：橫豎屏操作，只是針對移動端的。在PC端屏幕永遠是豎屏的
例如：
@media all and (min-width:500px){
#box{ background:blue;}
}
這段代碼的含義當分辨率>=500px的時候，會識別大括號里面的代碼
同樣我們可以知道：
@media all and (max-width:500px){
#box{ background:blue;}
}
這段代碼的含義當分辨率<=500px的時候，會識別大括號里面的代碼
而當我們使用外部引入css的時候，可在link標簽上加這樣的代碼：
<link rel="stylesheet" href="hello.css" media="all and (min-width:600px)">
這是我布局響應式的css依據，接下來我給大家分享下我常用的幾種css單位：
rem
rem單位是相對于字體大小的html元素，也稱為根元素，也是我開發的時候經常用到的單位。
html {
font-size: 10px; /* 不建議設置 font-size: 62.5%; 在 IE 9-11 上有偏差，具體表現為 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
em
相對于rem是于根元素（html）的字體大小，em則是相對于其父元素的字體大小，且最多取到小數點的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
rpx
rpx 是微信小程序解決自適應屏幕尺寸的尺寸單位。微信小程序規定屏幕的寬度為750rpx，也是我微信小程序開發的常用單位。 無論是在iPhone6上面還是其他機型上面都是750rpx的屏幕寬度，拿iPhone6來講，屏幕寬度為375px，把它分為750rpx后， 1rpx = 0.5px = 1物理像素。
vw 和 vh
vw為視窗寬度，1vw=視窗寬度的1% vh為視窗高度，1vh=視窗高度的1% 這是我開發最為喜歡的單位，無需做任何換算，還簡單。
看到這里你可能會疑問，為什么沒有px這個原始的像素單位，我這里說下我的看法，px設置字體大小時，是比較穩定和精確。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們制作的Web頁面時，如果改變了瀏覽器的縮放，這時會使用我們的Web頁面布局被打破。這樣對于那些關心自己網站可用性的用戶來說，就是一個大問題了，而我們用剛才的媒體查詢來進行修改，會非常麻煩（代碼量增加一倍，還沒有上面的單位寫的代碼兼容穩定），而現在的頁面開發都是需要你的代碼兼容兩端和各種尺寸的（手機電腦端），對于我來說，px確實已經不能作為主要開發的單位了。
以上就是我對響應式布局的理解和看法，如果有什么補充和見解，也歡迎在評論區留言。
浙公網安備 33010602011771號