響應式佈局概念
響應式佈局(Responsive design)，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
響應式佈局一 : Meta 標籤
兼容性:IE9以及以上，其它瀏覽器沒問題
主要通過設置以下幾個值實現響應式
device-width 設備的寬度,根據當前設備的寬度設置寬度。
initial-scale 初始縮放
maximum-scale 最大縮放 即允許的最大縮放程度
minimum-scale 最小縮放 即允許的最小縮放程度
user-scalable 用戶是否能改變頁面縮放程度，如果設置爲no，最大與最小縮放將被忽略
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
user-scalable=no"
>
響應式佈局二 : media 媒體查詢
兼容性:IE9以及以上，其它瀏覽器沒問題
/* 當文檔寬度小於980的時候 小於或等於指定的寬度時，樣式生效 */
@media screen and (max-width: 980px) {
.div1 {
width:500px;
}
/* 做一些其它的樣式 */
}
/* 大於或等於指定寬度時，樣式生效。 */
@media screen and (min-width: 980px) {
.div1 {
width:100px;
}
}
/* 上面是單個，現在試試多個 屏幕在600px~900px之間時*/
@media screen and (min-width:1000px) and (max-width:1200px){
.div1{
background:palegreen;
}
}
/* not關鍵字 樣式代碼將被使用在除開打印與設備寬度小於980px下所有設備中*/
@media not print and (max-width: 680px){
.div3{
background: chocolate;
}
}
上面這些寫在一個文件有些不好維護，那我們可以改變link標籤，根據屏幕分辨率引入不同的css
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="./css/css1.css">
<link rel="stylesheet" media="screen and (min-device-width:480px)" href="./css/css2.css">
在屏幕分辨率小於等於480px的時候，使用css1，當屏幕分辨率大於480px，使用css2，分開會更好維護。
響應式佈局三 : 百分比佈局
根據屏幕大小自動適應，兼容性強大
header{
width: 100%;
/* 百分比即是響應式 */
height: 40px;
background: green;
color: white;
}
.div1{
width: 50%;
height: 200px;
background: pink;
color: white;
}
需要注意的是圖片處理
簡單的解決方法可以使用百分比，但這樣不友好，會放大或者縮小圖片。那麼可以嘗試給圖片指定的最大寬度爲百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。
img { width: auto; max-width: 100%; }
用::before和::after僞元素 +content 屬性來動態顯示一些內容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能，根據不同的分辨率使用尺寸不同的圖片
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
css控制
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
附上百分比做的響應式一個案例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.main img {
width: 100%;
}
h1 {
font-size: 1.625em;
}
h2 {
font-size: 1.375em;
}
.header {
padding: 1.%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4%;
margin-left: 0;
margin-top: 0;
padding: 4%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2%;
}
.right {
padding: 4%;
background-color: #CDF0F6;
}
.footer {
padding: 1%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2%;
margin-right: 2%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.5%;
}
.gridmain {
width: 49%;
}
.gridright {
width: 23%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
@media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1%;
padding: 1%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1%;
}
.gridright {
width: 100%;
}
.right {
padding: 1%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>響應式案例</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">列表一</div>
<div class="menuitem">列表二</div>
<div class="menuitem">列表三</div>
<div class="menuitem">列表四</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>Wilson</h1>
<p>我覺得這裏最帥的就是博文作者了,我覺得這裏最帥的就是博文作者了
我覺得這裏最帥的就是博文作者了我覺得這裏最帥的就是博文作者了
</p>
<img src="./img/gf.jpg" alt="girlfriend" width="" height="">
</div>
</div>
<d iv class="gridbox gridright">
<div class="right">
<h2>帥的突破天際</h2>
<p>這裏是一些文字文字文字66666</p>
<h2>博文作者是真的帥</h2>
<p>在坐的各位都帥9999999999999</p>
<h2>隨便放</h2>
<p>帥就完事了</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p>今天學到東西了，很開心很開心。今天學到東西了，很開心很開心今天學到東西了，
很開心很開心今天學到東西了，很開心很開心</p>
</div>
</div>
</div>
</div>
</body>
</html>
響應式佈局四 : flex
Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。
兼容性：IE9+
從一個面試題說起：如何讓一個盒子在body裏上下左右居中
最簡單的方式莫過於flex，通常使用margin的方式太low
body{
/* 重點在這 */
display:flex;
}
body,html{
height:100%;
}
div{
height:300px;
width:600px;
/* 重點在這 */
margin:auto;
}
//無論你屏幕大小如何調，都會保持居中狀態
其它相關屬性
/* 換行 wrap-reverse：換行，第一行在下方。nowrap（默認）：不換行。wrap：換行，第一行在上方。*/
flex-wrap:wrap;
/*主軸方向 排列方向 。row | row-reverse | column | column-reverse;*/
flex-direction: row;
/* 主軸元素對齊方式 flex-start | flex-end | center | space-between | space-around*/
justify-content: center;
/* 多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。 */
align-content:flex-start;
/* flex-start | flex-end | center | space-between | space-around | stretch */
order爲排序先後，數字越小排前面
flex-grow爲比例大小，根據屏幕大小自動分配
<div class="con">
<div style="order:5;flex-grow:3;background: orangered;">我是div1</div>
<div style="order:3;flex-grow:3;background: yellow;">我是div3</div>
<div style="order:2;flex-grow:4;">我是div4</div>
</div>
如有錯誤，歡迎指正
本篇博客爲原創，轉載請註明出處