@media
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
一、语法
1、样式表中的CSS媒体查询
@media mediatype and|not|only (media feature) {
·····················
}
<!-- 例子 -->
@media (max-width: 600px) {
#header {display: none;}
}
2、link元素中的CSS媒体查询
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<!-- 例子 -->
<link rel="stylesheet" media="screen and (max-width: 800px)" href="example.css" />
二、media type
常用的:all 、screen、print
例子
1、响应式
屏幕宽度 小于等于960px时,执行它里面的CSS
@media srceen and (max-width:960px){ ````````}
//or
<link media="srceen and (max-width:960)" rel="stylesheet" type="text/css">
屏幕宽度 大于960px,小于1199px时,执行它里面的CSS
@media srceen and (min-width:960px) and (max-width:1199px){ ·······}
//or
<link media="screen and (min-width:960px) and (max-width:1199px)" rel="stylesheet" type="text/css" >
屏幕宽度 大于1199px时,执行它里面的CSS
@media screen and (min-width:1199px) { ······· }
//or
<link media="screen and (min-width:1199px)" rel="stylesheet" type="text/css" >
2、多个媒体类型
如果你想向最小宽度20em的手持设备或屏幕应用样式表,你可以使用这样的查询:
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
@media screen and (min-width:800px),print and (min-width:7in){·······}
Viewport
viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
一、语法
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
二、例子
(1)强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
(2)iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
<meta content="yes" name="apple-mobile-web-app-capable">
(3)第三个也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
<meta content="black" name="apple-mobile-web-app-status-bar-style">
(3)告诉设备忽略将页面中的数字识别为电话号码
<meta content="telephone=no" name="format-detection">