一、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
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的浏览器才能使用)。
可采用方法:
利用属性:
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"
注释: vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width;
vh 是相对于视口高度百分比的单位,1vh = 1% viewport height;
vmin 是相对当前视口宽高中 较小 的一个的百分比单位,同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。
widht: 100%;
height:100vw