响应式布局笔记
一. 布局設(shè)計(jì)
參考https://www.w3cschool.cn/responsive/8w9adozt.html
總結(jié)：對(duì)于通欄，大于等于2欄的等分排版建議采用彈性布局；大于等于2欄的非等分排版建議采用混合布局；
二.布局響應(yīng)
布局響應(yīng)，對(duì)頁面進(jìn)行響應(yīng)式的設(shè)計(jì)實(shí)現(xiàn)，需要對(duì)相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，有兩種方式：桌面優(yōu)先（從桌面端開始向下設(shè)計(jì)）；移動(dòng)優(yōu)先（從移動(dòng)端向上設(shè)計(jì)）；
無論基于那種模式的設(shè)計(jì)，要兼容所有設(shè)備，布局響應(yīng)時(shí)不可避免地需要對(duì)模塊布局做一些變化（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)）， 我們通過JS獲取設(shè)備的屏幕寬度，來改變網(wǎng)頁的布局，這一過程我們可以稱之為布局響應(yīng)屏幕。常見的主要有如下幾種方式：
布局不變，對(duì)模塊內(nèi)的內(nèi)容進(jìn)行1.擠壓－拉伸；2. 換行－平鋪；3. 刪減－增加；
布局改變，主要有：1.模塊位置變換；2.模塊展示方式改變：隱藏－展開；3.模塊數(shù)量改變：刪減－增加；
三.媒體查詢
（要注意最大寬度時(shí)從大到小，最小寬度時(shí)從小到大,否則樣式優(yōu)先級(jí)問題）
方式一：在樣式表中內(nèi)嵌@media
@media 設(shè)備名 only|and|not (media feature){CSS-Code}字符間以空格相連，選取條件包含在小括號(hào)內(nèi)，多種設(shè)備用逗號(hào)分隔，這一點(diǎn)繼承了css基本語法。
- only（限定某種設(shè)備，可省略），
- and（邏輯與），
- not（排除某種設(shè)備）為邏輯關(guān)鍵字，
- srules為兼容設(shè)置的樣式表，包含在中括號(hào)里面。
超小屏幕<768px；小屏幕>=768px；中等屏幕>=992px；大屏幕設(shè)備>=1200px
例子
/*屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。*/
@media?only?screen?and?(min-device-width:480px)?and?(max-device-width:1024px)?and?(?orientation:portrait?){?.box{margin:0?auto;}?}方式二：引用外部樣式@import
@import url("css/?.css" )設(shè)備名 only|and|not (media feature){CSS-Code}例子
注意：（最好在樣式表中使用，在style標(biāo)簽中使用IE6.7不兼容）
方式三：在link中使用media
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 800px)">例子：
<link?rel="stylesheet"?href="style/b.css"?media="?only?screen?and?(max-device-width:480px)?">四.媒體查詢@media
使用@media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。
參考http://www.runoob.com/cssref/css3-pr-mediaquery.html
https://www.w3cplus.com/content/css3-media-queries
主要媒體類型有（可用設(shè)備）：
媒體特性（功能）@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
| 媒體特性 | 取值 | min/max | 描述 |
| width | <length> | yes | 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾?/td> |
| height | <length> | yes | 定義輸出設(shè)備中的頁面可見區(qū)域高度 |
| device-width | <length> | yes | 定義輸出設(shè)備的屏幕可見寬度 |
| device-height | <length> | yes | 定義輸出設(shè)備的屏幕可見高度 |
| orientation | portrait 豎屏 ? landscape橫屏 | no | 定義'height'是否大于或等于'width'。 ? 值portrait代表是---豎屏，landscape代表否---橫屏 |
| aspect-ratio | <ratio> | yes | 定義'width'與'height'的比率 |
| device-aspect-ratio | <ratio> | yes | 定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10 |
| color | <integer> | yes | 定義每一組輸出設(shè)備的彩色原件個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0 |
| color-index | <integer> | yes | 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0 |
| monochrome | <integer> | yes | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0 |
| resolution | <resolution> | yes | 定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | progressive | interlace | no | 定義電視類設(shè)備的掃描工序 ? progressive：連續(xù)掃描；interlace：交織掃描 |
| grid | <integer> | no | 用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。只有1和0才是有效值，1代表是，0代表否 |
五.常用視口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">viewport 是用戶網(wǎng)頁的可視區(qū)域。
viewport 翻譯為中文可以叫做"視區(qū)"。
手機(jī)瀏覽器是把頁面放在一個(gè)虛擬的"窗口"（viewport）中，通常這個(gè)虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁擠到很小的窗口中（這樣會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
可能的值：
- width---viewport的寬度 可能的值 像素| device-width
- height – viewport的高度---可能的值 像素| device-height
- initial-scale – 初始的縮放比例
- minimum-scale – 允許用戶縮放到的最小比例
- maximum-scale – 允許用戶縮放到的最大比例
- user-scalable – 用戶是否可以手動(dòng)縮放---可能的值yes||no或者1||0
- target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
此屬性為文檔兼容模式聲明，表示如果在IE瀏覽器下則使用最新的標(biāo)準(zhǔn)渲染當(dāng)前文檔
X-UA-Compatible是自從IE8新加的一個(gè)設(shè)置，對(duì)于IE8以下的瀏覽器是不識(shí)別的。
IE=edge 告訴IE,IE8以后的版本使用最新版本的引擎渲染網(wǎng)頁;
chrome=1安裝了GCF后可以激活Chrome Frame.
emmet快捷鍵：meta:compat
最后說下IE瀏覽器，因?yàn)樗恢С謒edia Queries的，使用時(shí)需要引用一個(gè)Media Query Javascript解決，如下
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇： tomcat.apache startu
- 下一篇： 从零开始学习前端开发 — 15、CSS3