响应式布局的实现方式（5种）
響應式布局?是同一頁面在不同的屏幕上有不同的布局，即只需要一套代碼使頁面適應不同的屏幕。
1、百分比布局?
百分比是相對于 包含塊 的計量單位，通過對屬性設置百分比來適應不同的屏幕
包含塊：
1. 有父元素相對于父元素
2. 無父元素相對于視口
3. 或者繼承于父元素
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> %和rem 布局</title><style>html {font-size: 30px;}.box2 {width: 10rem;height: 10rem;background-color: plum;}.box {width: 80%;height: 200px;background-color: aquamarine;}.part {width: 80%;height: 80%;background-color: pink;}</style></head><body><div class="box"><div class="part"></div></div><div class="box2"></div></body> </html>2、rem布局?
?rem（font size of the root element）是指相對于根元素的字體大小的單位，rem只是一個相對單位
? ? ? ? ? ?題外： rem和em的對比
? ? ? ? ? ? ? ? 1. rem和em都是相對單位
? ? ? ? ? ? ? ? 2. rem相對于根元素
? ? ? ? ? ? ? ? 3. em相對于父元素
? ? ? ? ? ?情景描述：
? ? ? ? ? ?1. 設置HTML的根元素的font-size為20px
? ? ? ? ? ?2. 設置紅色的正方形寬高為2rem
? ? ? ? ? ?3. 設置綠色的正方形寬高為40px
? ? ? ? ? ?4. 從圖中可以看出兩個正方形一樣寬高
? ? ? ? ? ?5. 所以1rem === 根元素字號 === 20px
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>rem布局</title><style>html {font-size: 20px;}.r1 {width: 2rem;height: 2rem;background-color: plum;}.r2 {width: 40px;height: 40px;background-color: aquamarine;}</style></head><body><div class="r1"></div><div class="r2"></div></body> </html>?
項目中如何方便的使用的rem呢？
設想一個場景，如果一個元素的寬需要47px,根元素是20px,如果要適應不同的終端，需要轉為rem，除以20px得到相應的rem值,很麻煩，那么就需要找一個可以簡單計算的數值，下面就是一個方法呦
1. 設想屏幕寬度為750px，設計稿寬度也為750px
2.設置 font-size = 1rem = 屏幕寬度*100/設計稿寬度 = 100px (乘以100的原因，屏幕寬度/設計稿寬度得出的值是1，而瀏覽器可以接受的最小字號12px，所以乘以100既可以滿足瀏覽器最小字號的要求，也比較好計算)
3. 屏幕寬度不會只是750px，假設屏幕寬度為width(getBoundingClientRect().width可以獲取寬度)，在該寬度下的字號為fontSize
4.width/(750*fontsize)=750/(750*100)?
5. 通過上面這個方法可以計算出fontSize的值
?
3 媒體查詢?@media screen? ? ? ? ? ? ? ?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>@media screen</title><style>.box {width: 10rem;height: 10rem;background-color: pink;margin-left: 20rem;}@media screen and (min-width: 1200px) {html {font-size: 20px;}}@media screen and (max-width: 1200px) {html {font-size: 10px;}}</style></head><body><div class="box"></div></body> </html>4 flex布局??
5、vw 和 vh
vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：
| vw | 相對于視窗的寬度，1vw 等于視口寬度的1%，即視窗寬度是100vw |
| vh | 相對于視窗的高度，1vh 等于視口高度的1%，即視窗高度是100vh |
| vmin | vw和vh中的較小值 |
| vmax | vw和vh中的較大值 |
?
(1條消息) 前端響應式布局原理與方案（詳細版）_weixin_34273479的博客-CSDN博客https://blog.csdn.net/weixin_34273479/article/details/91401352?spm=1001.2101.3001.6650.1&depth_1-utm_relevant_index=2
總結
以上是生活随笔為你收集整理的响应式布局的实现方式（5种）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言军棋,基于C 的网络军棋设计果皮版
- 下一篇： 2017年html5行业报告,云适配发布