第一课 移动端&响应式

Posted 2020-08-12 姜腾腾

一、调试工具介绍（Chrome Emulation）

　　1.Device（设备相关）

　　　　自定义尺寸、Network（网络模拟）、UseAgent（浏览器信息）、缩放

　　2.Media（媒体）

　　3.Network（网络模拟）

　　4.Senors（传感器）

　　　　经纬度、陀螺仪

二、本地服务器搭建

　　1.搭建服务器 || HBuilder

　　2.同一网络下用设备连接

　　　　*关闭防火墙

三、像素比

　　1.点 point（抽象单位）

　　2.像素渲染（栅格化）

　　3.物理像素（调整大小）

　　4.dpi、ppi

　　5.获取像素比（window.devicePixelRatio）

四、viewport（视口）

　　1.width 设备宽度[pixel_value | device-width]

　　2.user-scalable 是否允许缩放（no || yes）

　　3.initial-scale 初始比例

　　4.minimum-scale 允许缩放的最小比例

　　5.maximum-scale 允许缩放的最大比例

　　6.target-densitydpi （已淘汰）

　　7.动态控制比例 1/像素比

五、前期准备

　　1.布局单位介绍选择

　　2.默认样式处理

　　　　-webkit-tap-highlight-color:transparent;

　　　　input{-webkit-appearance:none;}/*去除input默认样式*/

　　3.框架搭建

　　4.横竖屏适配

　　　　getBoundingClientRect().width

　　　　resize.orientationchange

六、媒体查询

　　all 所有媒体

　　braille 盲文触觉设备

　　embossed 盲文打印机

　　print 手持设备

　　projection 打印预览

　　screen 彩屏设备

　　speech ‘听觉’类似的媒体类型

　　tty 不适用像素的设备

　　tv 电视

七、媒体特征

　　min-width 分辨率宽度大于等于设备值得时候识别

　　max-width 分辨率宽度小于等于设备值的时候识别

　　orientation:portraint 竖屏

　　orientation:landscape 横屏

　　-webkit-min-device-pixel-radio:2 像素比

八、关键字

　　and 和、与（连接媒体特性）

　　not 排除指定媒体类型

　　only 指定某种特定的媒体类型（很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备）

九、样式引用

　　外联样式表 link[media="all and (min-width:600px)"]

　　@import @import url(index.css)all and (min-width:600px)

十、常规尺寸

　　@media all and (min-width:1200px){//大分辨率（PC分辨率、TV）}

　　@media all and (min-width:850px) and (max-width:1199px){//中等分辨率（PC小分辨率 || pad）}

　　@media all and (min-width:700px) and (max-width:849px){//pad分辨率}

　　@media all and (min-width:480px) and (max-width:699px){//高分辨率手机设备 || 低分辨率平板}

　　@media all and (max-width:479px){//手机设备}

补充：

一、移动开发需求

　　1.让页面的宽度跟访问设备的宽度一致 device-width

　　2.不让用户进行页面缩放 user-scalable = no

　　3.控制像素比

　　 （如何让1px做1px的事情？a 1:1像素还原 b 尽可能的和设备分辨率一致）

　　   通过JS控制像素比：

　　　　<script>

　　　　　　//获取像素比

　　　　　　var pixelRatio = 1/window.devicePixelRatio;

　　　　　　//通过JS动态设置视口（viewport）

　　　　　　document.write(‘<meta name = "viewport" content = "width = device-width,initial-scale = ‘+pixelRatio+‘,minimum-scale = ‘+pixelRatio+‘"/>‘)

　　　　</script>

二、移动布局步骤

　　1.确定尺寸（设计稿）并且还得再符合该尺寸的模拟器下进行第一次预览

　　2.搭建大体框架

三、单位对比

　　px 绝对（固定）单位

　　　 缺点：任何情况下都是固定值，会导致布局在不同尺寸的设备下错位

　　% 相对单位（会有影响发生变化）相对于父级（自身）大小进行计算

　　　 缺点：能确定范围的还是比较好计算的，对于不太好确定值的地方不好使用百分比，并且会导致变形

　　em 相对单位（会有影响发生变化）em=当前字体大小

　　    缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦

　　rem r=root em=字体大小font size 相对单位 只依赖html字体大小

四、动态设置字体大小

　　<script>

　　　　//条件：尺寸越大，则字体越大，尺寸越小，则字体越小

　　　　//获取html节点

　　　　var html = document.getElementByTagName(‘html‘[0]);

　　　　//获取屏幕宽度

　　　　var pageWidth = html.getBoundingClientRect().width;

　　　　//屏幕宽度/固定数值=基准值

　　　　html.style.fontsize = pageWidth/10 + ‘px‘;

　　</script>

 

移动端固定定位的方法：

　　html{width:100%;height:100%;overflow:hidden;}

　　body{width:100%;height:100%;overflow:auto;}

　　需要定位的元素使用position:absolute;top:0;left:0;