移动端开发

Posted 2020-08-16 zifieyu666

• viewport

  • <meta name="viewport" content="width=device-width,
    height=device-height,user-scale=no.initial-scale=1.0,
    minimun-scale=1.0,maximun-scale=1.0,target-densitydpi=device-dpi"/>

    • device-width/数值（大部分安卓手机不支持，苹果手机支持）
    • height可以不设置，会根据宽度自动缩放。
    • dpi//ios不支持，安卓大部分支持。
  • 媒体查询
    • @media
      • all  媒体类型
      • and（） 链接作用
      • only 特定设备
      • not 排除设备
    • 媒体特性
      • (max-width:500px)
      • (min-width:300px)
      • (orientation:portrait)竖屏
      • (orientation:landscape)横屏
      • (-webkit-min-device-pixel-ratio:2)像素比
• 移动端适配方案
  • 页面设置固定宽度320px，margin居中，左右留白用背景填充
  • 通过media，根据不同分辨率去设置不同的样式
  • 通过，百分比，flex或者rem等手段，等比例缩放
  • rem
    • em相对于字体大小 font-size=16px  1em=16px;
    • ren相对于根节点html的字体大小  html字体大小为16px  1rem=16px；
  • 头部和底部的固定不能用固定定位，会有兼容问题，用绝对定位。