详解布局之--静态、自适应、流式、响应式
- 靜態布局：意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫代碼的布局來布置；
- 自適應布局：就是說你看到的頁面，里面元素的位置會變化而大小不會變化；
- 流式布局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
- 響應式布局：每個屏幕分辨率下面會有一個布局樣式，同時位置會變而且大小也會變。
一、自適應布局
1、定義：可以自動識別屏幕寬度，并做出相應的調整。
例如：《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。
如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。
如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部。
如果屏幕寬度在400像素以下，則6張圖片分成三行。
2、實現
在網頁頭部<head>中加入<meta name="viewport" content="width=device-width,initial-scale=1" />
解釋：viewpoint是網頁默認的寬度和高度，網頁默認寬高等于屏幕寬高（width=device-width）,原始縮放比例為1（initial-scale=1），即網頁初始大小占網頁大小的100%。
3、兼容
對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
4、使用條件
由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度。寬度使用百分比（width：xx%）,字號只能使用（em）。
5、核心
使用CSS3的@media媒體查詢。
<link rel="stylesheet" type="text/css"?media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
除了用html標簽加載CSS文件，還可以在現有CSS文件中加載。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
二、流式布局
1、定義：各個區塊的位置是浮動的，當一行容納不下時，自動擠到下一行，而不會出現滾動條。
轉載于:https://www.cnblogs.com/candy-Yao/p/7399231.html
總結
以上是生活随笔為你收集整理的详解布局之--静态、自适应、流式、响应式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Yii2 中cookie的用法（2）
- 下一篇： [译]HTMLCSS Lesson2: