響應(yīng)式Web初探

標(biāo)簽：

Html/CSS Html5 JavaScript

传统网站直接搬到移动端是无法直视的；

在移动端会创建一个虚拟布局窗口来完整的显示页面，参照http://screensiz.es/phone可以看出，手机上最宽能显示1080px宽的网页，虽然这样可以看到完整的页面，但是缩小的窗口里面的内容视觉美感降低，是无法体现用户体验的，甚至产品的价值也会大打折扣；这是很糟糕的！而响应式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" />

其实用法就是这么简单，只是由PC过渡到移动端不仅是样式的改变，还可能涉及到整个页面的布局以及功能模块的改变，搞清状况后，query相应的视口，给相应的样式；最终达到一个页面能够适配多个终端，如果只是由PC到移动端，即使media query贵为HTML5，兼容性也是没有问题，IE9+及各大浏览器都很好的支持；如果要在PC端做响应式开发的话，因为贵为HTML5，只能hack到IE8+；如下：引入html5.js和respond.js

<!--[if lt IE 9]>
      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

點(diǎn)擊查看更多內(nèi)容