您好,欢迎访问【高丹SEO】网站登录
西安SEO为您提供SEO基础知识,SEO排名技术,网站优化教程,SEO问题解答,网站优化,网站SEO顾问等服务。
首页 >> 网站建设经验 >> 简单css技巧搞定自适应网页提高用户体验

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

2015-07-16 3
浏览次数1240次

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

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

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

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

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

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

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

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

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

技巧 2. HTML结构

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

HTML结构
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;}

}

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

全部评论:3
1#
腰果移动电源2015年7月16日下午3:07 回复

看晕了

2#
五常大米网2015年7月17日下午3:00 回复

好东西啊 可以用

3#
鹅卵石制砂机好处2015年7月22日上午6:46 回复

到处都讲用户体检,好难啊