經典例項（塊級元素自適應螢幕寬度）

今天面試，一到題目是這樣的：

有兩個塊級元素，左側的塊級元素的寬度是100px;右側的塊級元素不給定寬度，他們兩個的高度都是150px;問，要如何實現右側的div自動適應螢幕的寬度（即隨瀏覽器的寬度而變化），我覺得這個是乙個很經典的題目，因為有很多從事了很久的前端行業的人也不一定能做出來。下面讓我來實現他們把，這裡我已經把**精簡到了最簡。

直接擼：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>塊級元素自適應螢幕寬度
title
>
6<
style 
type
="text/css"
>
7.left
13.right
18style
>
19head
>
20<
body
>
21<
div 
class
="left"
>
div>
22<
div 
class
="right"
>
div>
23body
>
24html
>

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style 
type
="text/css"
>*ul
li:nth-child(1)
li:nth-child(2)
style
>
head
>
<
body
>
<
ul>
<
li>1
li>
<
li>2
li>
ul>
body
>
html
>

最大化時：

中間隨意的乙個寬度，注意right中的width的變化：

瀏覽器寬度最小的情況下（瀏覽器最小的寬度只能是311px）：

很棒有木有。

網頁自適應螢幕寬度

隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計 師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁內容？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有...

html css div自適應螢幕寬度，高度

做c s專案其實最讓人蛋疼的無非就是相容問題，各種瀏覽器的不相容外還有div css不科學的顯示問題。所以針對div css視窗最大化 縮小的自適應加以解決。top div css 布局一行兩列,左列固定寬度,右列自適應寬度 設定最小寬度,視窗小的時候顯示滾動條 firefox ie測試通過.辛苦幾...

自適應螢幕寬度 編寫自適應網頁的方法

有人 我說不知道怎麼寫自適應的網頁，今天就先不寫優化的了，我把寫自適應網頁的方法說下。工具 dw網頁設計軟體 ps影象處理軟體。方法 步驟 1，在之間加入加入一行viewport標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device wi...