CSS 關於CSS的幾種移動端布局方式

04.樣式初始化

二、流式布局

三、初識flex布局

四、關於rem

五、關於**查詢

六、初識less語法

七、響應式布局

name
="viewport"
content
="width=device-width,initial-sacle=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
>

initial-scale 初識縮放比

user-scalable 使用者縮放

maximum-scale 最大縮放比

minimum-scale 最小縮放比

如果在移動端直接插入原圖，那麼由於物理畫素比，也會被放大，會變模糊，

因此這裡需要，先準備原圖兩倍大小的（這裡的兩倍是指物理畫素比，不一定是兩倍的），然後手動縮小為一半，那麼在移動端顯示的時候會放大為兩倍，這次放大因為原圖先縮小了兩倍，那麼在放大時即恢復原圖大小，就不會變模糊

用background-size設定大小

特別注意精靈圖的二倍圖轉換

引入樣式：初始化css檔案

仿京東首頁

設定再父元素中，控制的是子元素的排列

.father

屬性值

描述flex

設定子項元素對剩餘空間的分配，每乙個子元素項都可單獨設定，將所有子元素佔的份數加起來，即為佔父元素的比例

align-self

單獨設定子項自己在側軸上的排列方式，包括flex-start;flex-end;center;stretch;baseline;

order

order控制子項的排列順序，越小越靠前,預設值為0

.son

仿攜程首頁小案例

如何讓高度也自適應？

方法：

@media screen and ( max-width : 800px) } @media screen and ( min-width : 801px) } p/* 以上樣式：在螢幕上並且最大寬度是800px 時，設定一種樣式最小寬度是801px時，改變為另一種樣式

*//* 即，根據不同的螢幕尺寸，改變為不同的樣式 */

在link中引入

借助外掛程式

.father
}

（未完待續~~~）