CSS實現響應式布局 自動拆分幾列

2022-01-22 07:39:44 字數 936 閱讀 6088

1.css**

2.網頁**

<

div

class

="container"

>

<

div

class

="outerdiv"

>

<

div

class

="innerdiv"

>

div>

div>

<

div

class

="outerdiv"

>

<

div

class

="innerdiv"

>

div>

div>

<

div

class

="outerdiv"

>

<

div

class

="innerdiv"

>

div>

div>

<

div

class

="outerdiv"

>

<

div

class

="innerdiv"

>

div>

div>

<

div

style

="clear: both"

>

div>

div>

3.總結

容器裡的outerdiv作為布局模組,寬度由視窗大小決定拆分比例,採用流動布局。innerdiv作為布局模組裡面的真正內容,寬度不要指定100%,否則加上邊框無法計算了。模組之間的間隔,需在innerdiv裡面設定margin。

css 響應式布局

響應式 型別 all所有 braille盲文觸覺裝置 embossed盲文印表機 print手持裝置 projection列印預覽 screen彩屏裝置 speech 聽覺 類似的 型別 tty不適用畫素的裝置 tv 電視 用法 media embossed 盲文印表機是綠色 box backgro...

CSS 響應式布局

學的太不仔細了,仰天默淚 media query 查詢 常見的屬性 基本語法 href link.css media only screen and max width 480px 先引入外部樣式表,media是css才有的屬性,只有在螢幕解析度小於或等於480px畫素的時候 才會這個外聯樣式才有效...

css 響應式布局

一.使用html中的viewport來實現 viewport語法如下 html 1 width 控制 viewport 的大小,可以指定的乙個值或者特殊的值,如 device width 為裝置的寬度 單位為縮放為 100 時的 css 的畫素 2 height 和 width 相對應,指定高度。3...