响应式web设计

机构:北京我赢职场IT教育机构 时间:2016-10-15 点击:1048

  关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。

  响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样,将已有的技术重新组合发挥新的作用。

  (1).媒体查询初探。媒体查询并非新出现的技术,如下:

  其中就使用了媒体查询,通过 标签的media属性为样式表指定了设备类型,当然CSS3时代的媒体查询更加丰富。

  发现了他们的区别吗?对,不只是针对设备进行适配,而且加了一个条件,就是当设备纵向放置的时候才匹配,咱们再看一个。

  大家会发现我们又拓展了一个条件,对,就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢?下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询):

  - width 视口宽度

  - height 视口高度

  - device-width 设备屏幕的宽度

  - device-height 设备屏幕的高度

  - orientation 检测屏幕处于横屏还是竖屏

  - aspect-ratio 基于视口的宽高比例

  - device-aspect-ratio 基于设备屏幕的宽高比

  - color 颜色的位数,如min-color:32 匹配设备是否有32位或以上的颜色

  - color-index 设备的颜色索引表中的颜色数

  - monochrome 检测单色振缓冲区中每像素使用的位数。为非负数,如monochrome:3

  - resolution 检测屏幕或打印机的分辨率,如min-resolution:300dpi(dpi后面会介绍),也可以是每厘米像素点的度量值,如min-resolution:120dpcm

  - scan 扫描方式,值为progressive(逐行扫描)、interlace(隔行扫描)

  - grid 检测输出设备是网格设备还是位图设备

  创建媒体查询时,上述特性(scan和grid不行)都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询,是不是还有其它的呢,答案是Yes 。html中的meta标签,此前我们常用的应该是这个

  但是现在我们要说的不是这个,而是这个:

  在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签,设置相应属性即可,如上代码,name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度(同理可以设置高度,也可指定具体值),initial-scale=1表示页面不缩放保持,mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小(实际就是不让缩放^^),user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕,还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi,后面的四个定性,第一个定量,即dpi_value是DPI值,device-dpi是使用设备原本的 dpi 作为目标 dp,不发生默认缩放,而后面的三个是指dpi取值在一定范围的表示。这里我们先介绍前文出现过的一个名词dpi,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。

  更多资讯,请访问北京web前端设计培训学校

免费试听

免费体验课开班倒计时

11: 59: 59

稍后会有专业老师给您回电,请保持电话畅通

咨询电话:15893081958
陈老师 QQ:3429316823
返回顶部