响应式布局入门

最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架。

目前已经越来越多的站点以及wap站点使用响应式设计,因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面。

css2的时期有一个不是很常用的media type,他拥有比如aural(声音)braille(触摸)print(打印)handheld(移动设备)等等十种媒体类型,(附加媒体类型详细http://www.w3.org/TR/CSS2/media.html#media-types)利用@media规则可以在同一样式表里为不同终端使用不同的样式。尴尬的是这个media type并没有被多少终端真正的支持。

现在CSS3有了个更为实用的 media query。而移动终端的浏览器基本已经完全支持了css3.他可以为你获取各种终端的数据。

先举个例子,大家看这个demo。(由于相应区域过大,就不截图了,请大家点击打开这个连接)

http://www.caihong.cc/demo/media/

一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这个demo也可以用拖动浏览器大小的方式测试。)

这就是一个最简单的 响应式布局 的页面。我们就从这个例子里认识下media query属性吧。

  1. @media screen and (min-width: 320px) and (max-width : 479px)

就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说。),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。

这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式进去,就像我们的例子里

  1. @media screen and (max-width : 320px){
  2. body{...}
  3. }
  4. @media screen and (min-width: 800px) and (max-width: 1024px){
  5. body{...}
  6. }

至于要判断多少种分辨率,完全取决于你产品的需求,常见的分辨率有手机,平板(注意这些终端是存在 横屏 竖屏 区别的,这个下一篇里提),桌面显示器。自己为自己所面对的终端定制样式。

一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的retina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,如何让放大了两倍的屏幕显示依然清晰?

在面对这种分辨率精细的终端,我们有另外一个条件查询语句 device-pixel-ratio

比如例子里的

  1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端的像素比是2的话,所渲染的样式。iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,例子里只有像素比为2的查询,1.5的或者其他比例方法一样,前面用的是几种浏览器的私有属性,最后一种是通用属性,

  1. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等于

  1. @media only screen and (min-device-pixel-ratio: 2)

为了一些版本的兼容性,不得已写的长了。

  1. body{
  2. font-size:24px;
  3. }
  4. .box2{
  5. background: url(d/20.png) #ccc;
  6. background-size:50%;
  7. }

在像素比为2的终端里这样写的目的,就是让他显示的更容易识别,一般来说显示一张1px的背景图片,我们要准备一张2px的,然后再background-size:50%这样。1.5像素比同例。

比如上面的demo,如果你用iphone4以上的苹果手机来看,中间的背景图片应该是显示“2.0像素比”。

这里也暴露了响应式一个很大的缺点:需要多做若干背景图(作为内容显示的图片暂时无视,弹性图片与弹性字体,下次单独写一篇介绍博文介绍)。

对于media query的兼容性,我想不是很重要,因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要,可以下载一个兼容的JS文件

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

以条件注释的方式加在文件里。

看完以上,我想关于响应式设计入门的知识应该了解了,后面有机会介绍一些好用的框架给大家分享。

现在终端设备越来越多,分辨率也越来越五花八门,但是为了用户体验,再多也要去兼容他呀~嘿嘿,我们下次见!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

CSS-in-JS,向Web组件化再迈一大步 | 洞见

简介 CSS-in-JS是什么,看到这个词就能大概猜到是在JavaScript里写CSS,那为什么要在JavaScript里写CSS呢,像之前一样写在css文件...

2878
来自专栏web前端教室

MVVM - 遇见未来

MVVM是新的前端开发模式,它的全称是Model View ViewModel,据说最初是由微软提出来的,。。 这种模式的实现,大意上是用自定义的标签把数据绑定...

1897
来自专栏微信小程序开发

微信小程序开发应该注意的问题

小程序是微信主推的产品,现在也有不少公司的产品已经开发了小程序版本。那么,开发小程序你需要了解哪些知识? 1、使用微信web开发者工具 此工具是微信官方提供的小...

2908
来自专栏玄魂工作室

PPT导出时嵌入字体的方法

使用ppt的时候,很多时候会使用一些特殊字体,在其他计算机上无法正常显示。这个时候就需要导出PPT的时候进行字体嵌入。 1.1 常规方法 所谓常规方法,是指那些...

3314
来自专栏ytkah

如何设置dedecms自定义表单必填项?

  用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户。那...

2786
来自专栏IT派

15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

我们在Tutorialzine上的任务就是让你了解最新最酷的Web发展趋势。这就是为什么我们每个月都会发布一些我们偶然发现并认为值得你关注的最佳资源的缘由。

1140
来自专栏vue学习

28、购物车结算页面-导航栏与地址选择布局

(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue

2223
来自专栏python小白到大牛

动漫迷的福利!Python小白也可以学会的爬虫教程

有一段没用 python 了,我也不知道自己为什么对 python 越来越淡,可能自己还是比较喜欢 android ,毕竟自己第一次接触编程就是 android...

1192
来自专栏菩提树下的杨过

jQuery中排除指定元素,同时选择剩下的所有元素

场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

1975
来自专栏编程

利用好这些代码把SEO优化做到极致,最后一个你肯定没用

SEO 本期主题,利用好HTML代码让网站优化更上一层楼, 很多人认为网站优化和代码没有什么关系,其实不然,代码和优化也有着千丝万缕的关系。如果代码这一步不弄好...

20210

扫码关注云+社区