移动端web开发基础认知

1.移动端开发认知

1.1 响应式布局的必要

为了能够使同一网站能够更好的兼容不同尺寸屏幕的浏览，设计开发网站常使用的技术为响应式布局

1.2 响应式布局的三要素

1. viewport视窗设置
2. @media媒体查询
3. 不要写死尺寸！！
   • 多用百分比定义尺寸
   • 多用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(物理像素和开发像素比)达到适配屏幕的效果，快捷方便，具体内容请查看官方文档。