第一课 移动端&响应式

时间:2021-07-25 16:43:53

一、调试工具介绍(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;