讓CSS自適應屏幕分辨率,這是比較常用的方法,多見於一些博客或用來顯示圖片的時候,圖片的背景一般都平鋪。讓CSS的Div適應分辨率,可以有多種方法,我們可配合JavaScript來實現,下面說下這幾種方法如何實現:
無滾動條的情況下:
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
02
<
Html
XMLns
=
"http://www.w3.org/1999/xHtml"
>
03
<
head
>
04
<
meta
http-equiv
=
"Content-Type"
content
=
"text/Html; charset=utf-8"
/>
05
<
title
>左右兩列自適應屏幕寬度</
title
>
06
<
style
>
07
*{margin:0px; padding:0px;}
08
div{height:300px;}
09
.left{width:50%; float:left; background-color:#FF0000;}
10
.right{width:50%; float:left; background-color:#0000FF;}
11
</
style
>
12
</
head
>
13
<
body
scroll
=
"no"
>
14
<
div
class
=
"left"
></
div
>
15
<
div
class
=
"right"
></
div
>
16
</
body
>
17
</
Html
>
有滾動條的情況下:
vIEw source