移動端布局

標籤：and   java   window   font   box   注意   viewport   其他   ica   

頁面配置→俗稱搭建頁面結構（html）和增加頁面樣式（css）

隨著html5和css3的發展，頁面配置工作也越來越複雜，但是也可以越來越好看

隨著科技發展布局也分為：pc端布局和移動端布局

pc端布局的痛點是要相容每個瀏覽器→chrome FF IE 6 7 8，最煩人的是ie，具體的問題自己可以百度

移動端不需要相容每個瀏覽器，移動端只有一個核心瀏覽器 -webkit- 但是需要相容各個尺寸

各個尺寸有很多：
蘋果4-8 有320 375 414 等 這些是蘋果手機的不同寬度的尺寸
android尺寸 320-640不等，
還有一些其他的國產機 尺寸大的驚人 有1024的尺寸

頁面要自適應這些寬度不等的裝置，有很多技術，主要介紹彈性布局和rem布局

彈性布局：相當於被父級加一個屬性，那麼他就相當於一個可以變寬變窄的容器，然後你可以在裡邊放東西

彈性盒子：
父級：
display:-webkit-box;（父級變成彈性盒子）
子級：
-webkit-box-flex: 1;（自己自己佔多少分數，分數具體怎麼分百度）

然後是一些屬性：
方向：
-webkit-box-orient: vertical;
水平：-> 分寬度
垂直: -> 分高度

相片順序：
-webkit-box-direction: reverse; 倒著排

水平排列：
-webkit-box-pack:center;
垂直排列：
-webkit-box-align: center;
還有讓子項目水平置中，垂直置中，水平垂直置中的屬性等。

彈性布局也要注意幾點：
* 彈性只能加給父級，也就是說你想讓那些元素在一起排列就給它的父級加彈性
* 用彈性了，子級就不能浮動，這個要記住後期維護很重要。

定位和彈性不能一起用

還有一點：移動端的頁面必須要加上幾個meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-
scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

具體為什麼加百度，有可能會查出更多的meta標籤，不過也是根據具體情況自己加

————————————————————————————————————————————————
rem布局
依賴根項目來計算的方式，就是先給予html元素一個font-size，然後我們所有的rem就根據這個font-
size來計算
比如：html{ font-size:16px;} 那麼1rem=16px來計算，瀏覽器預設是16px,轉成px比較麻煩所以可以
設定成html{font-size=62.5% 也就是預設10px的字型大小} 但是瀏覽器最小是12px,小於12px會做12px來計算所有
可以用js動態來設定
<script type="text/javascript">
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=m(字型大小)*doc.documentElement.clientWidth/n（
設計圖寬度）+‘px‘;
}
change();
win.addEventListener=(‘resize‘,change,false);
})(window,document)
</script>

如何在不同尺寸下顯示不同的寬高，需要根據設計稿的寬度，如果設計稿是320，可以是字型大小是20，px轉換
rem就是px/20

————————————————————————————————————————————————
還有流體布局，等亂七八糟（有時間在說）

 

 

移動端布局