您的位置：首页 > Web前端 > CSS

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

2016-12-18 12:09 176 查看

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

1.Width定义和用法

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

取值和描述：

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

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

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

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

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

<
4000
span>3.实例

html文件：

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

<meta charset="UTF8">

<title>index</title>

<style>

.header{

width: 100%;

background-color: #0c0c0c;

height: 60px;

}

.header ul li{

padding-top:15px ;

float: left;

width: 60px;

color: #fff;

}

</style>

</head>

<body>

<div class="header">

 <ul>

 <li>首页</li>

 <li>Link1</li>

 <li>Link2</li>

 </ul>

</div>

</body>

</html>

效果图

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航