就是使用**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。
裝置劃分
尺寸區間
超小螢幕（手機）
< 768px
小屏裝置（平板）
>= 768px ~ < 992px
中等螢幕（桌面顯示器）
>= 992px ~ < 1200px
寬屏裝置（大桌面顯示器）
>= 1200px
響應式需要乙個父級做為布局容器，來配合子級元素實現變化效果
原理就是在不同螢幕下，通過**查詢，來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面布局和樣式變化
響應式尺寸劃分
螢幕尺寸
超小螢幕
寬度100%
小螢幕寬度設定為750px
中等螢幕
寬度設定為970px
大螢幕寬度設定為1170px
我們也可以根據情況自己定義劃分
例子
<
!doctype html>
"utf-8"
>
"viewport" content="width=device-width, user-scalable=no,
initial-sale=
1.0, maximum-scale=
1.0, minimum-scale=
1.0"/
>
<
/title>
.container
/* 1. 超小螢幕下 小於 768 布局容器的寬度為 100% */
@media screen and
(max-width:
767px)
}/* 2. 小螢幕下 大於等於768 布局容器改為 750px */
@media screen and
(min-width:
768px)
}/* 3. 中等螢幕下 大於等於 992px 布局容器修改為 970px */
@media screen and
(min-width:
992px)
}/* 4. 大螢幕下 大於等於1200 布局容器修改為 1170 */
@media screen and
(min-width:
1200px)
}<
/style>
<
/head>
="container"
>
<
/div>
<
/body>
<
/html>按照不同檔位，盒子的寬度是不一樣的
① 當螢幕》=768px時，給布局容器container寬度為750px
② container裡面包含8個小li盒子，每個盒子寬度定位93.75px，高度為30px，浮動一行顯示
③ 當螢幕縮放，寬度<=768px時，container盒子寬度修改為100%寬度
④ 此時8個小li，寬度修改為33.33%，這樣一行只能顯示3個小li，剩餘廈航顯示
移動端web開發之四娃 響應式布局
1.1 響應式開發原理 使用 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。裝置的劃分情況 1.2 響應式布局容器 響應式需要乙個父級做為布局容器，來配合子級元素來實現變化效果。原理就是在不同螢幕下，通過 查詢來改變這個布局容器的大小，再改變裡面子元素的排列方式和大小，從而實現...
響應式web布局
通過不同的 型別和條件定義樣式表規則，查詢讓css可以更精確作用於不同的 型別和同一 的不同條件。查詢的大部分 特性都接受min和max用於表達 大於或等於 和 小與或等於 如 width會有min width和max width 查詢可以被用在css中的 media和 import規則上，也可以被...
web前端開發之響應式布局
即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.彈性布局是css3引入的強大的布局方式，用來替代以前we...