一、媒体查询
默认值写在最前面,或者给媒体查询样式添加important.
如果要使用max-width,条件值比较大的写在前面。
如果要使用min-width,条件值比较小的写在前面。
@media all and (max-width:600px(条件值)){
选择符{样式}
}
@media all and (max-width:600px) {
div {
background: blue !important;
}
}
例子:
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
@media all and (min-width:320px) {
body {
background: red;
}
}
@media all and (min-width:375px) {
body {
background: blue;
}
}
</style>
二、理想化视口
在写移动端的时候必须写这个
<meta name="viewport" content="width=device-width, initial-scale=1.0">
三、根据不同设备引入不同的样式
<link rel="stylesheet" href="..//css/css320.css" media="all and (min-width:320px)">
<link rel="stylesheet" href="..//css/css375.css" media="all and (min-width:375px)">
四、布局方案
固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;
可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
弹性布局(就是媒体查询):以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;
混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。
布局响应:对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:pc优先(从pc端开始向下设计);移动优先(从移动端向上设计);
无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),
五、mate相关的属性
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->