常用视口设置

让视口和设备的默认尺寸保持一致

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,user-scalable=no">

适配像素

通过js动态适配字体宽度

将屏幕分为十份

  1. function setRem() {
  2.     let rootEM = document.documentElement;
  3.     rootEM.style.fontSize = window.innerWidth / 10 + 'px';
  4. }
  5. setRem()
  7. window.onresize = setRem;

十六份

  1. function setSize() {
  2.     let size= window.innerWidth / 16;
  3.     document.documentElement.style.fontSize = size+ "px";
  4. }
  5. setSize();
  6. window.onresize = setSize;

VW和VH （兼容性差）

view width 和 view height
相对于可视区宽度等比缩放

  1. VW：相对于可视区宽度的单位：100 vw == 100% 可视区宽度的100%
  2. VH：相对于可视区高度的单位：100 vh == 100% 可视区高度的100%

VW 配合rem 适配（最常用）

按照以下设置方式，不需要再使用js修改页面宽度，但是兼容性差，最好用js做双保险

  1. 6.25vw == 页面宽度的1/16

1px的问题

  1. iphone 4 实际分辨率：960*640
  2. iphone 4 css分辨率：480*320
  3. iphone 6 实际分辨率：1334*750
  4. iphone 6 css分辨率：667*375

像素比

  • 手机本身屏幕过小，但是分辨率又比较大，这样呈现的出来文字或内容会比较小，看的不是很清晰
  • 像素比： 把原先 1px 的内容，放大为 npx 来显示,会导致本身 1px的边框，实际会变成 n px

解决方法

window.devicePixelRatio

  • 该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
  • 简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素

动态设置

  1. let sty = document.createElement("style");
  2. sty.innerHTML = `
  3.     .border1{
  4.         border-width: ${1 / window.devicePixelRatio}px !important; 
  5.     }
  6. `;
  7. document.head.appendChild(sty);

然后将这个样式添加到所需要的地方

移动端的一些默认样式清除

  • -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 清除链接和按钮在点击时的高亮颜色
  • -webkit-appearance: none; border-radius: 0; 清除IOS下按钮的圆角
  • -webkit-appearance: none; 解决按钮等一些元素显示异常
  • -webkit-text-size-adjust:100%; https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust
  • 移动端滚动不流畅，添加-webkit-overflow-scrolling属性 值为touch