移动端开发在前端所占的比重现在是越来越重要了，今天整理一下移动端经常会使用的一些概念，以便今后查看。
一、Emulation 模拟器
一：Device 设备设置 1. model 模型选择 2. resolution 分辨率设置 3. Device pixel ratio 像素比设置 4. *Emulate mobile 模拟移动端特性 5. *Enable text autosizing 自动缩放字体 6. *Shrink to fit 缩放以适应屏幕 二：Media 媒体查询 三：Network 浏览器信息 四：Sensors 传感器 1. Emulate touch screen 模拟移动端触摸事件 --touch-events 2. Device Geolocation Overrides 重置地理信息 3. Accelerometer 模拟陀螺仪 α 围绕这Z轴的旋转 β 围绕这X轴的旋转 γ 围绕这Y轴的旋转
二、viewport
<meta name="viewport" content="" /> width [pixel_value | device-width] width 直接去设置具体数值大部分的安卓手机不支持的 但是IOS支持 user-scalable 是否允许缩放 （no||yes） initial-scale 初始比例 minimum-scale 允许缩放的最小比例 maximum-scale 允许缩放的最大比例 target-densitydpi (已经淘汰) -- dpi_value 70–400 //每英寸像素点的个数 -- device-dpi 设备默认像素密度 -- high-dpi 高像素密度 -- medium-dpi 中等像素密度 -- low-dpi 低像素密度 -- webkit内核已不准备再支持 <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />
三、媒体查询
引入方式 1. <link rel="stylesheet" type="text/css" href="index.css" media="all and (min- 600px)"> 2.@import url("css/reset.css") all and (min- 600px) ; 3.@media all and (min- 600px) { .box { 100px; } } 媒体类型 1.all 所有媒体 2.braille 盲文触觉设备 3.embossed 盲文打印机 4.print 手持设备 5.projection 打印预览 6.screen 彩屏设备 7.speech '听觉'类似的媒体类型 8.tty 不适用像素的设备 9.tv 电视 媒体特性 1.(max-599px) 2.(min-600px) 3.(orientation:portrait) 竖屏 4.(orientation:landscape) 横屏 5.(-webkit-min-device-pixel-ratio: 2) 像素比 关键字 1.and 2.not not关键字是用来排除某种制定的媒体类型 3.only only用来定某种特定的媒体类型 -很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备
四、媒体查询
<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=medium-dpi" /> 主流分辨率:240*320(一般不考虑)、320*480、480*800(多)、640*960(多) 480*854 1280*720 800*1280 1080*1920 /* 320 - 480 */ A.页面设置固定宽度320px，margin居中，左右留白用背景填充 B.通过media，根据不同的分辨率去设置不同的样式 C.通过100%、flex或rem等手段，等比例缩放 1rem= 1个html上设置的字体大小