码迷,mamicode.com
首页 > 其他好文 > 详细

前端响应式开发

时间:2017-06-13 12:54:39      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:代码段   pre   16px   不同的   div   工作量   不同   版本   脚本   

最近在工作中遇到一些让人头疼的问题——多媒体查询,也就是大家所说的响应式布局(多终端适配)。在实际的开发过程中,响应式的设计使得多终端的适配变得非常方便,响应式展现的方式,更有一种组装变形金刚的感觉,但也在实际工作中发现了许多问题:

  一、开发思维变得复杂

  在我们开发页面的时候,思维无法专注于单一的PC端、移动端以及Pad端,开发每一个元素与版块的时候,都需要考虑多终端适配;所以建议大家在接到这一类项目的时候,不要急于去开发,先把所有的终端页面设计图全部浏览的看一遍,不单单光是看,看的过程中脑海里要有响应式开发的思路,不至于到后期花费大量的时间用于修改页面。

  二、牵一发而动全身

  响应式的设计初衷是一次开发,多终端适配,但在实际的应用中,即使有通过判断终端类型,而变换页面内容甚至隐藏的方式,也无法应对用户所提出的多终端之间的各种要求,而且每次需要修改一个页面的元素或者局部板块时,对于其他终端页面的影响都会令人头疼,因为考虑的内容较多,比如浏览器版本对于新技术的支持程度、不同版本间的BUG兼容、使用场景、屏幕的大小变化等等,顾忌太多,牵一发而动全身的特性无疑为后期维护增加了难度。

  三、文件体积偏大
  有时候为了适配多终端、多版本浏览器之间的兼容问题,需要为不同终端写不同的代码段,但如果通过一个页面满足多终端的个性化需求,这个页面的代码体积无疑是非常大的,对于PC端还好说,对于流量昂贵的移动终端这无疑是致命的。

说了这么多问题,我们为什么还要用响应式,响应式也有几个优点:

  1. 工作量少,网站、代码、内容只需要一份,多出来的工作量只是JavaScript脚本、CSS样式;
  2. 每个设备都能得到正确的设计;
  3. 搜索优化;
  4. 数据调用简单;

下面说一下响应式开发都需要做些什么:

 第一步:Meta标签 (允许网页宽度自动调整)

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />


【viewport是网页默认的宽度和高度,上面代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。】

(所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。)
  or
(ie8以及更早的浏览器不支持Media Query
可以使用media-queries.js或者respond.js来为IE添加Media Query支持)

 

第二步:HTML结构

注意:尽量不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素;
2)相对字体大小
字体可以不使用绝对大小(px),使用相对大小(em)。
body {
    font: normal 100% Helvetica, Arial, sans-serif;
}



第三步:媒介查询(css3 Media Query 媒介查询)

  方法一:
  @media screen and (max-width:1000px){
     content:{width:100%;}
  }

  方法二:

  <link rel="stylesheet" media="screen and (max-width:640px)" href="">

 

媒体查询能检测的特性:

width : 视口宽度
height : 视口高度
device-width :设备屏幕宽度
device-height : 设备屏幕高度orientation : 检查设备处于横向还是纵向
aspect-ratio : 视口宽度和高度的宽高比,例如:一个16:9比例的显示屏可以这样定义aspect-ratio : 16/9;
device-aspect-ratio : 设备屏幕宽度和高度的宽高比;
color : 每种颜色的位数,例如min-color:16会检测设备是否拥有16位颜色;
color-index :设备的颜色索引表中的颜色数,值必须是非负数的;
monochrome : 检测单色帧缓冲区中每像素所使用的位数,值必须是非负数的,例如:monochrome : 2;
resolution : 用来检测屏幕或打印机的分辨率,如min-resolution : 300dpi,每厘米像素点数的度量值,如min-resolution : 118dpcm;
scan : 电视机的扫描方式,值可设为progressive(逐行扫描)或者interlace(隔行扫描),如720p HD 电视(720p的p表示逐行扫描),scan : progressive,而1080i HD 电视的i表示隔行扫描,匹配scan : interlace ; grid : 用来检测输出设备是网格设备还是位图设备;

 

屏幕尺寸响应
  1.固定布局
  2.流动布局
  3.自定义布局
  4.栅格布局

  分辨率:预设的分辨率有(可切换横版,竖版)
  普通智能手机:320×480
  iPhone5:320×568
  普通平板:800×600
  iPad2、3、mini:768×1024
  宽屏电脑:1280×800
  HDTV:1920×1080

前端响应式开发

标签:代码段   pre   16px   不同的   div   工作量   不同   版本   脚本   

原文地址:http://www.cnblogs.com/fanyz/p/7000098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!