Web前端基础Day15---16[移动端]

这是一个关于Web前端基础Day15---16[移动端]的思维导图，包含逻辑像素和物理像素、 屏幕宽度获取、.移动端主流布局方案等。

Day15---16[项目]移动端

• 1.设备划分
  • pc端大屏 > 1200px
  • 超小屏 :phone 320px-768px
  • 小屏; pad 768px-1024px
  • 中屏: 992px-1200px
• 2.视口
  • 2.1、视口介绍
    • 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，比如布局视口开始为了在手机上展示pc端页面就设置为980px的宽度。
    • 2个视口总结如下：
      • ayout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，宽度一般为980px。
      • ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。
  • 2.2、视口设置
    • 移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
    • 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中 <meta name="viewport" content="width=device-width, initial-scale=1.0, userscalable=no"> device-width设备宽度 width=device-width 视口宽度= 设备宽度
• 3.逻辑像素和物理像素
  • 物理像素: 生活当中
  • 逻辑像素（设备独立像素、css像素）: css像素 写代码
  • 分辨率:ppi
  • 手机尺寸:对角线长度(英寸)
  • pc 端： 1物理像素= 1逻辑像素
  • 倍率= 物理像素/逻辑像素
  • 移动端: 物理像素和逻辑像素通常呈现倍数关系。
• 4.屏幕宽度获取
  • 4.1、 h5媒体查询
    • @media 设备类型 and (查询条件) { //代码 只有查询条件被满足才会执行这里的代码 } 设备类型: screen设备屏幕 print 打印机
      • @media screen and (width:414px) { .box { baclground-color:red; } } @media screen and (min-width:414px) { //大于等于 414px 宽度的屏幕 .box { baclground-color:yellow; } } @media screen and (max-width:992px) { //小于等于 992px 宽度的屏幕 .box { baclground-color:blue; } } 992px ---1200px 需求 @media screen and (max-width:1200px) and (min-wdith:992px ){ //小于等于 992px 宽度的屏幕 .box { baclground-color:orange; } }
  • 4.2、js获取
    • var screenWidth = document.documentElement.clientWidth;
• 5. 移动端主流布局方案
  • 5.1 rem布局
    • rem: 相对单位 相对于html元素的font-size值 em : 相对单位 相对于父盒子身上的字体大小font-size
    • 原理: 在不同设备屏幕宽度下设置不同的html字体值大小，然后将设计稿下测量出来的px值兑换成rem值即可。
    • 5.1.1、 rem+媒体查询布局
      • 1. 先设置视口 meta viewport 理想视口
      • 2. 写媒体查询的适配文件 (在不同屏幕下设置不一样html字体值，兑换不一样的像素) 750px---100px 320px---?px 当前屏幕的html字体大小 = 当前屏幕宽度*预设字体大小/psd设计稿的宽度；
      • 3. 在设计稿下去测量 px 转换为rem (px/100) 写rem 单位
    • 5.1.2、rem+js查询
      • s适配文件: // 适配代码 //当前屏幕宽度 var screenWidth = document.documentElement.clientWidth; console.log(screenWidth); if(screenWidth>750){ screenWidth= 750; } //设计稿下预设html字体基础值 100px var psd_baseFS = 100; //设计稿宽度 psd:750px,640px,375px... var psdWidth = 750; //计算出来当前屏幕字体值 赋值 给当前html元素的字体属性里 document.documentElement.style.fontSize = screenWidth*psd_baseFS/psdWidth+'px';
  • 【笔试题】：rem布局原理
    • rem:相对单位，相对于根元素的font-size来计算的单位
    • rem布局原理:在不同设备屏幕宽度下设置不同的html字体值大小，然后将设计稿下测量出来的px值兑换成rem值即可
    • rem+媒体查询
    • rem+js
  • 5.2、视口单位vw布局
    • 浏览器内部 vw ，vh vw: viewport width 视口宽度 vh: viewport height 视口高度 规定: 屏幕宽度: 等分 100份 = 100vw 屏幕高度: 等分 100份 = 100vh
    • 适配: 375px屏幕宽度 = 100vw 那么1vw = 3.75px 如果设计稿下量下来 width:200px 转换为vw 就=200/3.75vw 如果直接拿vw和px做兑换，计算会非常麻烦!为了好计算我们可以找px和rem和vw的关系!!! 1vw = 3.75px 1px= 0.266666666667vw; 375px屏幕宽度 html {font-size:50px}; 1rem = 50px = 50*0.266666666667vw = 13.3333333333vw; 通过以上计算表明: rem和px还是50倍的倍数关系 这样不就好算了嘛!!!
    • 适配文件: html { font-size:13.3333333333vw; } px 和rem 倍数关系还是50倍 你在设计稿 量下的大小px /50 直接写rem单位即可!!!!
  • viewport视口设置：
    • width: 设置布局视口的宽度 device-width 设备的宽度 initial-scale： 初始缩放比例 minimum-scale: 最小缩放比例 maximum-scale: 最大缩放比例 user-scalable: 是否允许用户进行手动缩放 no不允许，yes表示允许
    • 视口单位
      • vw：视口的宽度，将屏幕宽度划分为100份
      • vh：视口的高度，将屏幕高度划分为100份
    • vw布局：
      • 1rem = 100px; 设计稿 750px = 100vw; 1vw=7.5px; 1px=0.1333333vw =====> 1rem = 13.33333vw
• 6、CSS初始化normalize.css
  • Normalize.css:保护了有价值的默认值
  • Normalize.css:修复了浏览器的bug
  • Normalize.css:是模块化的
  • Normalize.css:拥有详细的文档
  • 官网地址：http://necolas.github.io/normalize.css/
• 7、移动端特殊处理
  • 7.1、移动端禁止选中内容
    • 用户可以选中页面中的内容，那么你可以在css中禁掉
    • .user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移动端不需要） */ -ms-user-select: none; /* IE 10+ */ }
  • 7.2、移动端取消touch高亮效果
    • 在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：
    • html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  • 7.3、禁止弹出系统菜单(禁止保存或拷贝图像IOS）
    • 通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像。
    • img,a{ -webkit-touch-callout: none; }
  • 7.4、移动端如何清除输入框内阴影
    • 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
    • input, textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ }
  • 7.5、高清屏中1px线问题
    • 在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗。
    • 1像素问题解决： 可以采用伪元素+transform模拟的方式
    • 除此之外还有很多方法不做具体要求。