您的位置:首页> 站长必读 > 建站经验 > 内容

建站经验

响应式布局产品用户体验这么差,你老板知道吗?

昆宏科技 建站经验

 

  “响应式”这个词现在越来越流行了,它的出现,对于WEB前端的设计还是code,起到了很大的推动作用。

  随着网民生活水平的提高,电脑和手机屏幕越来越大,对于产品的用户体验会要求越来越多,这必然导致行业内各公司的产品竞争越来越烈。

  

1344247638_-1719592020_20984_imageAddr.jpg

 

  如果你经常关注到一些门户网站,比如淘宝、乐视等, 发现他们现在的网站布局不同分辨率下有着不同的效果,这种技术也是以后的一种趋向了,不仅仅是在PC端,而在我们的移动端,也是如此。现在人手基本一部智能机器,分辨率也是很多种,如何在不同分辨率下,给用户带去更好的体验,作为前端人员应该多花点心思了。在项目过程中,我们经常会被产品以及测试人员问到 类似下面的问题:

  > 为什么用三星S4和苹果4/5错位、换行,图片质量太差?

  > 为什么我用笔记本和台式电脑上浏览,效果不一样?

  > 能不能保证在不同分辨率下内容都能充满屏幕啊?

  .....

  针对以上问题,我们引入Media Queries来解决。你可以针对不同media类型设置表达式,根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式,为mobile设置另外一种 样式。这个功能相当强大,你可以不修改页面内容的情况下,为不同设备提供不同的样式效果。

  下面让我们详细讲下如何应用Media Queries吧!

  Media Queries

  打开Demo页面,调整浏览器的大小,查看页面布局变化情况。

  Max Width

  当页面视图区域小于600px宽度的时候,css会被使用到。

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

  .class {

  background: #ccc;

  }}

  你也可以使用下面的方式,在页面的中引用外部css文件。

  Min Width

  当视图区域大于900px宽度的时候,css会被使用到。

  @media screen and (min-width: 900px) {

  .class {

  background: #666;

  }}

  多个 Media Queries

  你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。

  @media screen and (min-width: 600px) and (max-width: 900px) {

  .class {

  background: #333;

  }}

  设备Width

  下面的css会在 max-device-width为480px的时候使用,例如iphone。

  注意:max-device-width指的是设备实际分辨率,max-width指的是可是区域尺寸。

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

  .class {

  background: #000;

  }}

  针对 iPhone 4

  下面的时针对iphone4的css。

  针对 iPad

  你也可以在ipad上检查定位(portrait 或者 landscapse)。

  针对Internet Explorer的Media Queries

  因为ie8以及之前版本的ie浏览器不支持media query,你需要使用JavaScript的hack计较解决问题。下面是一些解决方案:

  CSS Tricks - 使用jquery判断浏览器尺寸

  The Man in Blue - 使用Javascript

  jQuery Media Queries 插件

  示例站点

  你可以使用支持media query的浏览器访问下面的站点,例如:Firefox, Chrome, 和 Safari。可以查看他们针对浏览器宽度所做的布局响应。

  1、新版淘宝首页

  淘宝首页现在中间部分布局是:左中右,其中左边导航是固定宽度的,中间和右边使用了“media query”使得在不同分辨率下采用响应式布局,如下:

  默认尺寸[1190px]:

  

tao1.jpg

 

  中等尺寸[1009px]:

  

tao20.jpg

 

  小尺寸[740px]:

  

tao2.jpg

 

  2、Hicksdesign

  大尺寸: 3 列sidebar

  小尺寸: 2 列sidebar (中间的sidebar跑到了左边)

  更小尺寸: 1 列sidebar (最右边的跑到了logo下面)

  最小尺寸: 没有sidebar (logo 和 右侧的sidebar 上移,其他sidebar 下移)

  

 

  3、Colly

  页面布局根据浏览器的可视区域,在1列、2列和4列之间切换。

  

 

  4、A List Apart

  大尺寸:导航在上不部, 1行图片

  中等尺寸:导航在左边, 3列图片

  小尺寸:导航在上部,logo没有背景图片, 3列图片

  

 

  5、Tee Gallery

  他和之前的Colly有点像,不同点在于它的图片会根据页面布局的变化,进行缩放。这里使用的技巧就是,对图片使用百分比宽度,代替固定宽度,例如:width=100%。

  

 

 

  总而言之,Media Query目前在移动端应用很多,虽然在PC端有些局限性,但以后是一个趋向,我们应该更多的去研究它,目的是让我们的项目拥有更好的用户体验。

  我们需要注意到,针对mobile做了一个css,并不意味着我们的站点对mobile设备就是优化的。对mobile设备进行优化,网站图片和html代码同样需要缩小尺寸,这样才有益于加载。media query做到的只是设计展现,而不是优化操作。

  最后只想说,一个好的产品,必须具备好的用户体验。

昆宏科技有限公司河南网站建设,免费做网站,手机网站建设)开发团队——由一批具有国内著名网络公司服务背景的网络精英所组成,年轻、富有活力,是一家集互联网开发、网络运营、互联网服务于一体的网络科技公司。致力于互联网技术服务、网站建设网站优化手机网站建设以及微信营销等,为企事业单位提供一站式、全方位整合网络品牌服务。

昆宏科技商城:sc.bz3399.com(点击有优惠哦!)

昆宏科技官网:www.bz3399.com(河南省最专业的网站制作团队)

昆宏科技论坛:bbs.bz3399.com

昆宏科技在线考试:exam.bz3399.com(全自动的无纸化的考场!)

昆宏科技客服QQ:3143542926(点击即可进行聊天!)

昆宏科技(河南网站建设,免费做网站)邮箱:3143542926@qq.com

昆宏科技(河南网站建设,免费做网站)联系电话:18539010113

昆宏科技微信公众账号:zgkhkj (扫描二维码关注微信有不定时红包哦!)

昆宏科技官方微信
更新时间:2018-09-07 07:15:00

更多>> 最新案例

更多>> 热门案例

更多最新文章

更多热门文章推荐

更多相关文章推荐

Copyright © 2002-2016 昆宏科技有限公司( 河南网站优化免费做网站河南网站建设 )版权所有 备案号:豫ICP备16019002号-1