流式布局

• 概述

  • 是页面中元素的宽度按照屏幕分辨率自动进行适配调整，也就是我们常说的适配，它可以保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变，所以流式布局是移动端开发常用的一种布局。

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充

  • 流式布局方式是移动web开发使用比较常见的布局方式

  • 基本属性

    max-width	最大宽度
    min-width	最小宽度
    max-height	最大高度
    min-height	最小高度

视口

• 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口

• 布局视口(layout viewport)
  * 一般移动设备都设置了一个布局视口，用于解决早期的pc端页面在手机上的显示问题
  * ios 和android基本上都将这个视口分辨率设置为980px，所以pc端上的很多页面都可以在手机端上呈现，只不过元素看上去很小，一般可以通过手动缩放网页查看
• 视觉视口(visual viewport)
  * 字面意思，它是用户正在看到的网站的区域（注意:是网站的区域）
  * 我们可以通过缩放操作视觉视口，但是不会影响布局视口，布局视口依然保持原来的宽度
• 理想视口(ideal viewport)
  * 为了使网站在移动端有最理想的浏览和阅读宽度而设定的
  * 理想视口对设备来讲是最适合的视口尺寸
  * 需要手动添加meta视口标签通知浏览器操作
  * meta视口标签的主要目的是
  • 布局视口的宽度，应该与理想视口的宽度保持一致，简单理解就是设备有多宽，我们的布局视口就有多宽

meta视口标签

• 属性

  width	宽度设置的是 viewport宽度 (设置device-width来把浏览宽度设置为设备的宽度)
  initial-scale	初始缩放比 (大于0的数字) 页面打开时显示的大小
  maximum-scale	最大缩放比 (大于0的数字) 页面最大的缩放比例
  minimum-scale	最小缩放比 (大于0的数字) 页面最小的缩放比例
  user-scalable	用户是否可以缩放 (yes 或 no 1 或 0 )

• 标椎的viewport设置

  • 视口宽度和设备保持一致
  • 视口的默认缩放比例是 1.0
  • 不允许用户自行缩放
  • 最大允许的缩放比例是 1.0
  • 最小允许的缩放比例是 1.0

二倍图

• 二倍图就是比原来图片大两倍的图片，因为在手机端会把原始图片放大，而原来的图片放大后就变模糊了

• 物理像素和物理像素比

• 物理像素点是指屏幕显示的最小颗粒，是物理真实存在的，这是厂家在出厂时就把屏幕设定好的

• 我们在开发的时候的 1px 不一定等于 物理像素的 1px

• pc端页面 1px = 1个物理像素 ，但是移动端就不相同了

• 1px等显示的物理像素点的个数 称为物理像素比

• 比如 ip8 的物理像素是 1:2 （1是pc端 2是手机端）

• 像素比的问题

• 因为出现了像素比，会有以下问题

• css中插入图片 50*50的图片，在手机端中会根据物理像素比放大，放大后图片就变模糊了

• 在标椎的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

• 通常使用二倍图， 因为 ip6 7 8 的影响 现在还存在 3 或 4 倍图

• 用倍图就需要缩放图片

background-size

• 背景缩放

• 格式

• background-size: 背景图片宽度 背景图片高度;

• 属性

  px	背景图片的缩放比例
  %	根据父盒子来缩放，50%是父盒子的一半
  cover	完全覆盖div盒子，但是背景元素可能会显示不全
  contain	高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不进行拉伸了，可能会有空白区域

  div{
     width 1000px;
     height 1000px;
     border:2px solid red;
     background:url(./2.jpg) no-repeat;
     /* background-size: 1000px ; */
     /* 1.只写一个参数，肯定是宽度了，高度就会等比例缩放 */
     /* 2.可以跟百分比  相对于父盒子来说的，也就是说，50%是父盒子的一半*/
     /* background-size: 50%; */
  
     /* 3、cover ,会完全覆盖div盒子，但是背景元素可能会显示不全*/
     /* background-size: cover; */
     /* 4.contain ,高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不在进行拉伸了，可能有空白区域*/
     background-size: contain;   
  }
  
  
   <div></div>

移动端页面样式

• 单独制作移动页面(应该是主流)
• 通常情况下，用户输入网址，通过判断设备跳转到pc端还是移动端
• 制作响应式页面
• 通过改变屏幕宽度，来改变样式
• 缺点制作麻烦，要调节兼容性

移动端的一些样式

• css初始化 normalize.css

• 移动端初始化css

• 保护了有价值的默认值

• 修复了浏览器bug

• 是模块化的

• 有详细文档

• npm install normalize.css 下载

• css盒子模型 box-zizing

• 传统模式宽度计算

• 盒子宽度 = css中设置的width + border + padding

• css3盒子模型

• 盒子宽度 = css中设置的width里就包含了 border和padding

• 也就是说 css3中的盒子模型 padding和border不会撑大盒子

• 格式

• box-sizing: border-box 盒子模型就变为css3盒子模型了

• 属性

  border-box	没有border和padding撑大盒子（border和padding包含在width中了）
  content-box	默认值
  inherit	继承父元素的box-sizing属性的值

• 清除高亮（a标签点击高亮）

• -webkit-tap-highlight-color: transparent;

• 清除按钮样式 （button按钮样式）

• -webkit-appearance: none;

• 禁用长按时弹出菜单

• -webkit-touch-callout: none;