html5 移動(dòng)端、幾種常見(jiàn)的布局、flex布局

1、html5 移動(dòng)端、幾種常見(jiàn)的布局、flex布局*移動(dòng)端掃瞄器：uc、qq、歐朋、百度、360、谷歌、搜狗、獵豹；基本上都是webkit內(nèi)核。*手機(jī)頻幕多：安卓480*800，480*854，540*960，720*1280，1080*1920*移動(dòng)端調(diào)試辦法：谷歌的模擬手機(jī)調(diào)試（f12，底部其次個(gè)手機(jī)圖標(biāo)），本地服務(wù)器手機(jī)拜訪。*視口viewport：就是掃瞄器顯示頁(yè)面內(nèi)容的屏幕區(qū)域。以前視口默認(rèn)的是980px為標(biāo)準(zhǔn)。？ ? ? meta視口標(biāo)簽通知掃瞄器。設(shè)備有多寬，布局的視口就有多寬。標(biāo)簽是如何控制網(wǎng)頁(yè)的尺寸和縮放掃瞄器的解釋。width=device-width/strong>部

2、分將頁(yè)面的寬度設(shè)置為尾隨設(shè)備的屏幕寬度（視設(shè)備而定）。initial-scale=1.0部分設(shè)置掃瞄器首次加載頁(yè)面時(shí)的初始縮放級(jí)別。*物理像素：屏幕顯示的最小顆粒，是真切存在的。物理像素比：pc端1px表示一個(gè)物理像素，iphone8等1px表示兩個(gè)物理像素。普通開(kāi)發(fā)尺寸是辨別率的一半。retina（視網(wǎng)膜屏）：把更多的物理像素點(diǎn)壓縮到一塊屏中。手機(jī)中普通這樣處理，100*100，在樣式中width、height變成50；然后放到視網(wǎng)膜屏中就不會(huì)變的含糊。背景縮放：background-size:背景寬度 ?高度；只寫(xiě)一個(gè)值表示等比縮放。屬性值可以是像素、百分比、cover（等比縮放填彌漫盒子

3、會(huì)裁剪）、contain（把圖像等比擴(kuò)展至最大尺寸，只要長(zhǎng)或者寬有一個(gè)到邊了就不拉伸了，所以會(huì)有留白）*移動(dòng)端的主流計(jì)劃：?jiǎn)为?dú)制作（主流）、響應(yīng)式頁(yè)面兼容pc端。移動(dòng)端初始化：插件normalize.css*移動(dòng)端點(diǎn)擊會(huì)顯示高亮，去除高亮的方法：-webkit-tap-hightlight-color:transparent；設(shè)置點(diǎn)擊透亮。在移動(dòng)端掃瞄器默認(rèn)的外觀在ios上加上這個(gè)屬性才干給按鈕和輸入框自定義樣式：-webkit-appearance:none;禁用長(zhǎng)按頁(yè)面時(shí)彈出菜單：-webkit-touch-callout:none*移動(dòng)端常見(jiàn)布局：流式布局（百分比布局）、flex布局、l

4、ess+rem+媒體查詢布局、混合布局；響應(yīng)式頁(yè)面兼容移動(dòng)端：媒體查詢、bootstarp；流式布局：百分比布局；max-width: 最大寬 ?min-width:最小寬。*精靈圖2倍縮放注重事項(xiàng)：先在ps中縮放再測(cè)量，在代碼里也要background-size做相應(yīng)的縮放。*flex布局：pc端普通用傳統(tǒng)布局，移動(dòng)端普通用flex布局；任何一個(gè)容器都可以指定為flex布局。通過(guò)給父盒子添加flex屬性來(lái)控制自子盒子的位置和羅列方式。當(dāng)為父盒子設(shè)定為flex布局后，子元素的float,clear,vertical-align屬性將失效。display:flex;在用法之前，一定先要確定到主軸

5、。父常見(jiàn)屬性：flex-direction:設(shè)置主軸，默認(rèn)主軸是x軸，row從左往右，row-reverse從右往左羅列，column從上倒下，column-reverse從下到上。元素都是沿著主軸羅列的。justify-content:設(shè)置主軸上的子元素的羅列方式；flex-start從頭開(kāi)頭，從左到右；flex-end從尾部開(kāi)頭;center：在主軸居中對(duì)齊；space-around平分剩余空間；space-between先兩邊貼邊在平分剩余空間。flex-wrap:nowrap默認(rèn)子元素不換行，假如裝不下，會(huì)縮小子元素。wrap：裝不下就換行。alignitems：在側(cè)軸上子元素的羅列方

6、式（單行用法）；stretch拉伸（不要設(shè)置高度）、center擠在一起居中、flex-start、flex-end。aligncontent：在側(cè)軸上子元素的羅列方式（多行用法，換行）；stretch拉伸（不要設(shè)置高度）、center擠在一起居中、flex-start、flex-end、space-around（上下沿都有距離）、space-between（一個(gè)貼上沿，一部分貼下沿）；flex-flow:是flex-direction和flex-wrap的復(fù)合寫(xiě)法。子常見(jiàn)屬性：flex：定義子項(xiàng)目分配剩余空間，表示占多少份。flex：1；默認(rèn)是0.align-self：控制子項(xiàng)在自己的側(cè)軸上的羅列方式。flex-end；order：定義子項(xiàng)的羅列挨次。數(shù)值越小越靠前，默認(rèn)是0；flex布局種主要針對(duì)寬度變幻；rem主要是針對(duì)高度變幻；*rem適配布局em是相對(duì)于父元素的字體大小。rem是相對(duì)于html元素的字體大小。html font-size:10px;通過(guò)修改html中的文字大小，來(lái)控制頁(yè)面中元素大小，必需寫(xiě)在樣式最上面。媒體查詢：可以針對(duì)不同的屏幕尺寸設(shè)置不