CSS使网页适应不同屏幕大小

CSS使网页适应不同屏幕大小

1.Width定义和用法

定义和用法：属性设置元素的宽度

取值和描述​：

     auto：默认值。浏览器可计算出实际的宽度。

     length：使用 px、cm 等单位定义宽度。

     %：定义基于包含块（父元素）宽度的百分比宽度。

     inherit：规定应该从父元素继承 width 属性的值。

2.设置width属性值为百分比，简易实现适应不同屏幕大小。

3.实例

html文件：

html><</span>html lang="en"><</span>head>

<</span>meta charset="UTF8">

<</span>title>index</</span>title>

<</span>style>       

 .header{           

 width: 100%;            

​background-color: #0c0c0c;            

​height: 60px;        

}        

.header ul li{

padding-top:15px ;

float: left;

width: 60px;            

​color: #fff;       

 }    

</</span>style>

​</</span>head>

​<</span>body>    

<</span>div class="header">

​        <</span>ul>

​            <</span>li>首页</</span>li>

​            <</span>li>Link1</</span>li>

​            <</span>li>Link2</</span>li>

​        </</span>ul>

</</span>div>

</</span>body>

​</</span>html>

效果图

大屏（没有出现水平滚动条，由于自适应屏幕）

小屏（没有出现水平滚动条，由于自适应屏幕）