关于html5+css3的响应式布局介绍

  1. 首页
  2. 首页>动态>技术经验
  • 发布日期 : 2019-04-06 浏览次数 : 9 分享文章到:

 

 

 

  一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是 三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以 触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了。)

 

 

  我们认识下media query属性吧。

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

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

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

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

body{...}

}

@media screen and (min-width: 800px) and (max-width: 1024px){

body{...}

}


  一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的retina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,几乎等于 一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页,他用1136的分辨率来显示,结果就是所有元素小的可怜。


  下一节会给大家说到,关于面对到分辨率比较精细的终端,会用一种什么样的方式去满足他的要求。

 

  接下来分析一下响应时布局的设计流程:

 

 

第一步:确定需要兼容的设备类型、屏幕尺寸

  设备类型:包括移动设备(手机、平板)和pc。对于移动设备,设计和实现的时候注意增加手势的功能。

  屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

 

第二步:制作线框原型

第三步:测试线框原型

第四步:视觉设计

第五步:前端实现

 

  与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。

 

转载请注明出处:昆明网站建设-昆明做网站 昆明蓝色代码工作室





Copyright © 2010-2017 lmlmlm.com(昆明蓝色代码工作室)版权所有 All Rights Services. 滇ICP备10200092号