简单css技巧搞定自适应网页提高用户体验

 

　　随着移动时代的崛起，据统计，我国目前有10亿手机用户通过手机访问网站，那么我们做优化的当然也不能放掉移动端这一块肥肉了，之前我们做网站包括优化网站都是PC端的网站优化，忽略的移动端。

　　到目前位置许多行业都很少有专门针对移动端的网站。 现在有些网站建设公司在做网站的时候喜欢向客户推荐移动、pc两种站点同时做，有些网络公司这两个是独立的网站，然后通过JS跳转代码，判断用户如果是手机用户访问，则自动跳转到移动版，如果是pc用户，自动留在pc端，但是这种不利于，做这种跳转的朋友希望能够及时改正，可以通过百度站长工具里面的“移动适配”工具进行设置，即可完美优化移动端。

　　除了上述方法，网站建设给大家推荐一种《自适应网页》，自适应网页是通过css技术，只需要做一个pc端，在写css文件的时候注意些，不管用电脑、移动、平板访问都是自动适应，自动分辨率的。

　　这种非常好的提高了用户体验，换个角度考虑如果你是手机访问一个网站，看到的是pc，需要手动缩放才可以看清文字，你会感兴趣吗?所以大家一定敢要注重移动端，是未来三年内会和pc一样普遍的。

　　说到这里，许多人就开始想如果做一个优秀的自适应网站呢?我通过网上搜集资料，搜集了一些比较简单的技巧，在建站的时候注意这些技巧，就可以完美解决自适应网页设计，让你拥有一个自适应电脑、手机、平板...的网站。

　　下面就来为大家整理几个自适应网页设计 技巧1：MEAT标签

　　IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js脚本实现支持。

　　技巧 2. HTML结构

　　在这个例子中，页面布局包括 header， content container， sidebar， 和 footer。header固定高度为180px， content container宽600px，sidebar宽300px。

　　

 

　　HTML结构图

　　技巧3：Media Queries

　　CSS3 media query是自适应网页设计的关键，他就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。 如果视口宽度小于等于980px，下面规则生效。

　　这里将容器像素宽度该用百分比，页面排版更加灵活。

　　/* for 980px or less*/

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

　　#pagewrap{width:94%}

　　#content{width:65%}

　　#sidebar{width:30%}

　　}

　　如果视口宽度小于等于700px， 将#content 和#sidebar 宽度设为自动(auto width)，并移除它的浮动属性(float)，这样它会变成满版显示。

　　/* for 790px or less*/

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

　　#content{width:auto;float:none;}

　　#sidebar{width:auto;float:none;}

　　}

　　当视口宽度小于等于480px时(如手机屏幕)，将#header高度设为自动，h1 的字体大小设定为24px，并隐藏#sidebar。

　　/* for 480px or less*/

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

　　#header{height:auto;}

　　h1{font-size:24px;}

　　#sidebar{display:none;}

　　}

　　这里的只是一个简单的快速教程，希望对大家有用。