1.移动端开发认知
1.1 响应式布局的必要
为了能够使同一网站能够更好的兼容不同尺寸屏幕的浏览,设计开发网站常使用的技术为响应式布局
1.2 响应式布局的三要素
- viewport视窗设置
- @media媒体查询
- 不要写死尺寸!!
- 多用百分比定义尺寸
- 多用rem、em确定尺寸
- 多用vh、vw确定尺寸
2.要点
2.1 viewport(视窗)
指的是视窗的窗口
对于移动端viewport默认为980px或1080px
以下代码可以让浏览器窗口宽度和屏幕相同
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
其中name表示设置类型为 viewport
宽度width为当前with device-width
user-scalable是否能缩放
initial-scale设置缩放值,一般为1
2.2 像素
早期css中1px等于屏幕1px
随着技术的发展,屏幕分辨率改变,屏幕分辨率和尺寸不匹配,会出现1个css中px等于2/3个物理px
在移动浏览器或者pc浏览器中,window对象 devicePexelRatin属性 dpr 可以获取
在js中用以下代码可以获取
window.devicePixelRatio
2.3 @media的使用方法
具体用处:当屏幕大小进行改变时能够有不同的样式显示
简单演示:
<style type="text/css">
body{
background-color: red;
}
@media screen and (max-width:1100px) {
body{
background-color: blue;
}
}
</style>
此处 screen 可以改成 all 等其他选择
以上设置可以使页面宽度大于1100px时为红色,小于1100px时为蓝色
除以上方法,外接样式也可以使用
<link rel="stylesheet" type="text/css" media="screen and (max-width:1100px)" href="css/index_max_1100.css" />
此处 screen 可以改成 all 等其他选择
以上代码表示,当页面宽度小于1100px时加载index_max_1100.css样式表
2.4 em与rem的应用
-
em
根据页面字体大小变化,默认字体大小为20px -
rem
在html中设置font-size后可以动态的控制页面大小
<style>
htle{
font-size :20px;
}
div{
weight:1rem;
hight:1rem;
}
</style>
此内容表示1rem等于20px,修改font-size可以改变rem的大小,div默认为1rem X 1rem大小
注:文字不建议用rem,一般用px
2.5 flexible.js移动端自适应方案
github地址:https://github.com/amfe/lib-flexible
官方文档地址:https://github.com/amfe/article/issues/17
具体效果:使用js动态的改变font-size和dpr(物理像素和开发像素比)达到适配屏幕的效果,快捷方便,具体内容请查看官方文档。