响应式网站

一、Meta 标签定义

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />

 

注释：

   1、  width:可视区域的宽度，值可为数字或关键词device-width

           intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
           maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
           user-scalable:是否可对页面进行缩放，no 禁止缩放

    2、网站开启对web app程序的支持

    3、在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

    4、当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接，iPhone默认为yes

  

二、Media Queries适配对应样式

   

  1、设备类型:(Media Type)

       all 所有设备；

　　screen 电脑显示器；

　　print 打印用纸或打印预览视图；

　　handheld 便携设备；

　　tv 电视机类型的设备；

　　speech 语意和音频盒成器；

　　braille 盲人用点字法触觉回馈设备；

　　embossed 盲文打印机；

　　projection 各种投影设备；

　　tty 使用固定密度字母栅格的媒介，比如电传打字机和终端。

  2、设备特性:(Media Queries)

      width 浏览器宽度；

　　height 浏览器高度；

　　device-width 设备屏幕分辨率的宽度值；

　　device-height 设备屏幕分辨率的高度值；

　　orientation 浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；

　　aspect-ratio 比例值，浏览器的纵横比；

　　device-aspect-ratio 比例值，屏幕的纵横比。

  3、根据浏览器的窗口大小来选择使用不同的样式：（注意适配顺序） 

@media (max-width: 767px) {
// col-xs
}

@media (min-width: 768px) and (max-width: 991px) {
// col-sm
}

@media (min-width: 992px) and (max-width: 1199px) {
// col-md
}

@media (min-width: 1200px) {
// col-lg
}

   4、在表达式中加not关键字：表示对后面的表达式执行取相反操作；

@media not print

   5、 在表达式中加only关键词：表示让那些不支持media queries但是能读取media type的设备的浏览器将表达式中的样式隐藏起来。    

@media only screen and (max-width:<code>1086</code>px){ }

【支持媒体特性(Media Queries)的设备，正常调用样式，此时only就等于不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，因为其先读了only而不是screen，所以不会调用样式。另外不支持Media Queries的浏览器，无论是否支持only，样式都不会被采用。】

三、响应式中遇到的问题



  1、 图片的适应问题：

图片类型：

     背景图片：可以通过media query自动的切换不同分辨率的版本（在支持background-size的浏览器才能使用）。

     img标签引入的图片：可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片。

可采用方法：

     利用属性：

         max-width、min-width及百分比。

img{ width: 100%; height: auto;max-width: 100%; display: block; }

         srcset、size、calc

<pre><img class="image" src="mm-width-128px.jpg"
<span style="color:#cd0000;">srcset</span>="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
<span style="color:#cd0000;">sizes</span>="(max-width: 360px) 340px, 128px">

宽度不确定时可用calc计算图片宽度：
eg：

sizes="(max-width: 360px) calc(100vw - 20px), 128px

  
注释：

srcset

：指向提供的图片资源。这里，指向了3个尺寸图片，分别实际尺寸128像素，256像素和512像素

           

sizes

用来表示尺寸临界点，主要用于响应式布局。这里表示当视区宽度不大于360像素时，图片的宽度限制为340像素；其他情况下，使用128像素。

size语法：

sizes="[media query] [length], [media query] [length] ... etc"

          
     利用相对于可视区域百分比的长度单位：vm，vh，vmin，vmax：

注释：     vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width；

               vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；

               vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。

widht: 100%;
height:100vw