CSS自適應布局思路

最近在做乙個自適應布局的專案，所以學了下自適應，下面是總結。此總結只做效果，不關注效率和**優化。

1.css3

html中新增

複製**

**如下:

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

css中的整體布局

cs code複製內容到剪貼簿

一般先寫移動端的css min-width: 0px,

然後再寫大一點的螢幕的css min-width: 380px，通過重寫css覆蓋之前的css達到自適應螢幕的效果。

2.整體思路

0-768px,顯示移動端的效果。width:100%,自適應螢幕寬度。

768-1200px;顯示pc端效果，包括ipad。螢幕寬度為固定1200px;

>1200px;顯示pc端效果，www.cppcns.com螢幕主體寬度為1200px,居中顯示，兩邊banner背景以漸變延伸。

3.banner自適應

pc端banner分三層，

一層為1200px，banner內的標題文字，小等內容放在這個div中。

第二層為width:100%,居中顯示，banner圖帶有一定透明度，設為這一層的背景圖,背景圖居中，不重複。當螢幕超過1200px兩邊背景會無限延伸，直到達到最大。

第三層也為width:100%,拉一條漸變做背景 background-size:100% 100%,當螢幕超過第二層背景時，漸變無限延伸，切配合第二層作為banner圖主體（第二層是半透明的）。

4.兩端對齊

複製**

**如下:

程式設計客棧text-align:justify;text-align-last:justify;

如今適用於大多數的瀏覽器，但是一些比較原生的瀏覽器會沒有效果。聽說是因為最後一行沒有兩端對齊效果，如一段文字的最後一行沒有必要兩端對齊。所以可以採用如下方式：

css code複製內容到剪貼簿

：after 偽類 在指定元素之後新增內容。

content:'' 表示要新增的內容。

width：100%。新增一行的寬度。

height:0 這一行的高度為0；

overflow:這一行不會被撐大，height:0;

本文標題: css自適應布局思路

本文位址:

自適應布局思路

最近在做乙個自適應布局的專案，所以學了下自適應，下面是總結。此總結只做效果，不關注效率和 優化。html中新增 viewport content width device width,target densitydpi high dpi,initial scale 1.0,minimum scale...

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...

CSS 自適應布局

說明 左列固定右列自適應，也可以為右列固定左列自適應，常見於中臺管理介面 移動端web的列表展示等等。固定寬度 自適應 說明 左邊的固定列設定為 float left，右邊的自適應列設定為 float none。css container left right 說明 自適應列的width根據calc...