CSS自适应屏幕宽度

2019独角兽企业重金招聘Python工程师标准>>>

    由于不同设备屏幕等分辨率的不同，所以会导致页面显示的宽度不一致。那么，如何在不同大小的设备上显示同样的网页呢？

一、设置网页宽度自适应

    在网页代码的head中，加入viewport标签即可：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
viewport：是网页默认的宽度和高度
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=1：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例

上述设置对所有主流浏览器都支持，包括IE9。但是对于老浏览器（如IE6、7、8），则需要使用css3-mediaqueries.js，代码如下：

<!-- [if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif] -->

二、尽量不使用绝对布局

    由于网页会根据屏幕宽度调整布局，所有尽量别使用绝对宽度的布局，也不能使用具有绝对宽度的元素。如css代码不要指定像素宽度：width:xxx px; 而采取百分百宽度：width: xx%; 或者width: auto。

三、相对字体大小

    在body设置字体大小100%, 即16px，如body{font: normal 100% Helvetica, Arial, sans-serif;}，然后h1{font-size: 1.5em;}这就设置了h1大小是默认大小的1.5倍，即24px。

四、流动布局

    .leftBar{float: left; width: 75%;}

    .rightBar{float: right; width: 25%;}

    float的好处是如同宽度不够，第二个元素则会自动滚动到前面元素的下方，不会在水平溢出，避免水平滚动条的出现。而相反地，绝对定位的话，需要使用到：position:absolute;这个建议使用的时候需要谨慎，尽量少用。

五、选择性加载css

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 300px)" href="smallScreen.css">

    这里显示如果屏幕宽度小于300px，就加载smallScreen.css文件。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 300px) and (max-device-width: 500px)" href="middleScreen.css">

    如果屏幕宽度在300到500之间，则加载middleScreen.css文件。

    上述代码也可以改成直接在css中加载：

@import url("smallScreeen.css") screen and (max-device-width: 300px);

六、@media的使用

    @media screeen and (max-device-width: 300px){

        div{

            display: block;

        }

}

    这里表示如同屏幕宽度小于300px，则div块显示方式是块级显示的。

七：图片的自适应

    通过css代码：img{max-width: 100%;}可以来实现图片的自动缩放。而老版本IE不支持max-width，所以可以写成img{width: 100%;}

    如果windows平台下缩放图片时出现失真，可以尝试使用IE的专有命令：img{-ms-interpolation-mode: bicubic;}，或者用Ethan Marcotte的imgSizer.js：

    addLoadEvent(function() {
        var imgs = document.getElementById("content").getElementsByTagName("img");
        imgSizer.collate(imgs);
    });

    然后实际情况中，最好的方法是根据不同屏幕大小，显示不同大小的照片：

    @meta screen and (max-device-width: 300px){ .img{ wdith: 60%;} }

    @meta screen and (min-width: 300px) and (max-device-width: 500px) { .img{ width: 100%;} }

    

    

转载于:https://my.oschina.net/u/3640519/blog/1524621