建立自適應網頁

2021-07-03 16:54:00 字數 708 閱讀 2656

1.css**不能指定畫素寬度

width:*** px

只能制定百分比寬度

width:xx%

或者 width:auto

body
上面的**指定，字型大小是頁面預設大小的100%,即16畫素

h1
然後h1的大小是預設大小的1.5倍,即24畫素

路東布局的含義是各個區塊的位置都是浮動的，不是固定不變的

.main
float的好處是，如果頁面寬度太小，放不下兩個元素，後面的元素會滾到下方，不會在水平方向出現溢位，避免的水平滾動條的出現.

它的意思就是自動檢測螢幕寬度，然後載入相應的css檔案

7.css的@media規則

同乙個css檔案中，也可以根據不同的解析度，選擇應用不同的css規則

@media screen and (min-device-width:400px)
自適應網頁設計必須實現的自動縮放

其實只需要一行**

img
老版本的ie不支援max-width,只好寫成

img

網頁自適應

1.文件 允許網頁寬度自動調整 網頁的原始比例即為螢幕的大小，ie9 viewport元標籤 網頁的預設寬度，width device width,是說網頁的初始寬度等於螢幕的寬度，initial scale 1,縮放比例為1倍 相容ie老版本需要支援 2.載入css css3 media quer...

網頁自適應

文章入口 自適應 使用 viewport 標籤 viewport 是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0，即網頁初始大小佔螢幕面積的100 使用 百分比 或 em 要變化的不宜...

網頁自適應

允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的？其實並不難。首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0...