在做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=https://www.cnblogs.com/smileZAZ/p/"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確實已經不能作為主要開發的單位了，
以上就是我對回應式布局的理解和看法，如果有什么補充和見解，也歡迎在評論區留言，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25965.html
標籤：Html/Css
上一篇：地理資訊
下一篇：antd pro 下的檔案下載