武汉web培训
达内武汉中心

15827352908

热门课程

武汉web培训:响应式web

  • 时间:2016-04-29 11:52
  • 发布:武汉web培训
  • 来源:web教程

    为了解决移动端屏幕分辨率的问题,各大浏览器专门定义并支持viewport虚拟窗口,他的作用就是允许开发者创建一个虚拟窗口,并且可以自定义其窗口大小或缩放比例,你只需要在网页的头部加入如下meta:

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

    这样就设置了移动页面的适应宽度为屏幕的宽度,比如iphone6上现在显示网页的宽就是375px,而不是原来的750px了;要想原本在PC上美美的网页同样优雅的展示,还需要其他的工作,比如,页面模块的重新布局、图片的相应缩放等。那么这时你就需要用到一个重要的html5模块了:Media Query,他的作用就是让你的网站能够很好适配不同终端,并提供相应的样式;

语法:@media [only|not] media_type and media_feature

media_type ——解释

all —— 所有设备

braille —— 盲文

embossed —— 盲文打印

handheld —— 手持设备

print —— 文档打印或打印预览模式

projection —— 项目演示,比如幻灯

screen —— 彩色电脑屏幕

speech —— 演讲

tty —— 固定字母间距的网格的媒体,比如电传打字机

tv —— 电视


media_feature — 值 — Min/Max — 描述

color > 整数 > yes > 每种色彩的字节数

color-index > 整数 > yes > 色彩表中的色彩数

device-aspect-ratio > 整数/整数 > yes > 宽高比例

device-height > length > yes > 设备屏幕的输出高度

device-width > length > yes > 设备屏幕的输出宽度

grid > 整数 > no > 是否是基于格栅的设备

height > length > yes > 渲染界面的高度

monochrome > 整数 > yes > 单色帧缓冲器中每像素字节

resolution > 分辨率(“dpi/dpcm”) > yes > 分辨率

scan > Progressive interlaced > no >tv媒体类型的扫描方式

width > length > yes > 渲染界面的宽度

orientation > Portrait/landscape >no > 横屏或竖屏

media_feature > 值 > Min/Max > 描述

color > 整数 > yes > 每种色彩的字节数

color-index > 整数 > yes > 色彩表中的色彩数

device-aspect-ratio> 整数/整数 > yes > 宽高比例

device-height > length > yes > 设备屏幕的输出高度

device-width > length > yes > 设备屏幕的输出宽度

grid > 整数 > no > 是否是基于格栅的设备

height > length > yes> 渲染界面的高度

monochrome > 整数 > yes > 单色帧缓冲器中每像素字节

resolution > 分辨率(“dpi/dpcm”) > yes > 分辨率

scan > Progressive interlaced >no > tv媒体类型的扫描方式

width > length > yes > 渲染界面的宽度

orientation > Portrait/landscape > no > 横屏或竖屏

用法一般是这样,非常简单:

//1、
@media screen and (max-width:450px){
        /*一些样式*/
        /*意思是界面宽度小于450px时的相应样式*/
        body{
             background:red;
        }
   }

//2、
@media screen and (orientation:landscape) {
        /*判断手机横向时*/
   }

//3、
<link rel="stylesheets" type="css/text" media="screen and (max-width:450px)" href="max450.css" />

总结:

    达内web培训专家得出结论,由PC过渡到移动端不仅是样式的改变,还可能涉及到整个页面的布局以及功能模块的改变,搞清状况后,query相应的视口,给相应的样式;最终达到一个页面能够适配多个终端,如果只是由PC到移动端,即使media query贵为HTML5,兼容性也是没有问题,IE9+及各大浏览器都很好的支持;如果要在PC端做响应式开发的话,因为贵为HTML5,只能hack到IE8+;

<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
上一篇:浅析jQuery基础核心
下一篇:HTML meta标签的全面总结

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊