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

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

1.Width定义和用法

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

取值和描述​:

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

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

     %:定义基于包含块(父元素)宽度的百分比宽度。

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

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

3.实例

html文件:

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

<meta charset="UTF8">

<title>indextitle>

<style>       

 .header{           

 width100%;            

background-color#0c0c0c;            

height60px;        

}        

.header ul li{

padding-top:15px ;

floatleft;

width60px;            

color#fff;       

 }    

style>

head>

<body>    

<div class="header">

        <ul>

            <li>li>

            <li>Link1li>

            <li>Link2li>

        ul>

div>

body>

html>

效果图

CSS使网页适应不同屏幕大小_第1张图片
大屏(没有出现水平滚动条,由于自适应屏幕)
CSS使网页适应不同屏幕大小_第2张图片 小屏(没有出现水平滚动条,由于自适应屏幕)  

 


 


你可能感兴趣的:(web前端,CSS)