CSS web页面自适应屏幕

  今天面对如此众多的PC浏览器，手机浏览器，不同屏幕大小，web页面不仅要适应浏览器兼容，还要适应屏幕大小。有可能为了移动端，再从新做一套页面，很麻分。

  下面我来说说通过注意使用CSS的方式，在一定程度上进行屏幕自适应，避免浏览器屏幕适应问题。

  首先，使用一个viewport: 

    <meta name="viewport" content="width=device-width, initial-scale=1" />

   <!--上面这行代码的意思是，网页宽度默认等于屏幕宽度-->

   2，不使用绝对宽度：width:xxx px;，可以使用em或%代替，字体也一样

   3. 推荐使用Float，也就是流动布局。这样可以将多出来的部分浮动到下面。

   4. 适当使用overflow，不滥用。

   5. 选择加载CSS:

        

 <link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素(max-device-width: 400px)，就加载tinyScreen.css文件。

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

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

7.  使用@media：

 

@media screen and (max-device-width: 400px) {

　　　　.column {
float: none;
width:auto;
}

　　　　#sidebar {
display:none;
}

　　}

8. 图片自适应：

   img { max-width: 100%;}

    或

   img, object { max-width: 100%;}