Web前端——移动端页面开发

Web前端笔记

第五部分：移动端页面开发

1. 移动端与PC端页面布局区别

• 视口
  视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，
  宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，
  这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。
  参考：001-移动端和PC端网页渲染区别.png
  由于产生按比例缩放，很多文字图片就会缩小不容易观看
  因此需要设置视口宽度大小和设备大小一样，这样就不会产生缩放，样式效果和实际显示效果相同

  这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，
  将视口的大小设置为和移动设备可视区一样的大小。

  • 设置方法：快捷方式：meta:vp 然后tab键
  ...... ...... - width=device-width 表示视口宽度和设备宽度相同 - user-scalable 不允许用户缩放 - 后面3个表示各种尺寸都是1.0,都写上是为了兼容各种浏览器

• 视网膜屏幕（retina屏幕）清晰度解决方案
  视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，
  无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，
  常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，
  它的物理像素点大小是一般屏幕的1/4（1个像素有4个物理像素点）,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。

  显示器正常1个物理像素，retina相同的尺寸实际有4个物理像素（4个发光点）
  正常图片1个像素对应显示器1个像素，但是retina屏幕也是放在1个像素里面，
  但是现在有4个像素点显示一个像素，图像的一个像素就要被拉大显示，实际就会出现模糊效果

  图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，
  但是由于视网膜屏幕的物理像素点比一般的屏幕小，
  图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，
  可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。

2. 适配布局类型

• PC及移动端页面适配方法
  设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
  1、全适配：响应式布局+流体布局
  2、移动端适配：
  - 流体布局+少量响应式
  - 基于rem的布局

2.1. 流体布局

• 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，
  流体布局中，元素的边线无法用百分比，
  可以使用样式中的计算函数calc()来设置宽度，
  或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

• 流体布局方式1：
  有bug不推荐，盒子的屏幕占比减去边框就是实际宽度
  calc()
  可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

• 流体布局方式2(推荐使用)：
  box-sizing:
  1、content-box
  默认的盒子尺寸计算方式
  (盒子尺寸默认值是内容宽度加padding加边框宽度，但是设置的宽度只是内容的宽度)
  2、border-box
  置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
  (盒子实际尺寸默认是不包含边框的里面的内容，现在改为从边框开始计算盒子的尺寸)

2.2. 响应式布局

• 响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，
  不同的宽度应用不同的样式块，
  每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。
  响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

  针对不同的屏幕宽度设置不同的样式宽度(配合响应式布局一起使用)

  相应布局的伪代码如下：参考006实例

2.3. 基于rem的布局

• 首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，
  rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，
  其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，
  改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
  html设置的字体大小就是1rem
  我们只需要改变html的字体大小，所有的页面字体都会一起变大或变小

• 根元素指定一个更容易计算的font-size，
  根据经验，一般将其设置为html的font-size：62.5%
  （浏览器的默认字体大小为16px，10px = 16px * 62.5%）。
  也可以指定font-size为10px，即1rem=10px
  这样一来，想要完成px到rem的转换，只要将px的值除以10即可。

• CSS3中的rem单位参考以下博客:
  https://blog.csdn.net/H_O_L_Y/article/details/51852954

• 参考实例007和008

• 流体式布局和rem布局区别：

  • 参考web_fluid和web_rem实例

  • 都打开index，然后切换到手机，iPhone6设备，可以左右拉动宽口或者切换设备，对比效果

  • 流体式布局，字体图片都不会改变大小（因为样式里面给的都是固定像素），用百分比设置的背景盒子(一般只设置宽度，高度不设置)也只会拉宽

  • rem布局，背景栏目，字体图片都会等比例放大缩小，虽然设置时候，样式里面是以iPhone6大小为基准设置样式

  • js里面设置的iPhone6屏幕尺寸下的默认html字体是10px

  • 切换设备或者拉伸窗口大小，默认字体10px会自动缩放，对应后面的样式全部是rem，以html字体作为基准

  • 因此所有样式都会自动按比例缩放，我们不断拉宽，可以发现html字体最大只能是20px，图片就只能放达到原始2倍（是否就是背景图2倍有关）

  • 菜单栏图标放大到2倍（图片原始大小）就不在放大了，但是顶部幻灯片可以不断放大，底部栏的图标也是一样

  • 图片是2倍图，拉大2倍以后图片就会逐渐模糊

• rem布局注意

  • 选定一个移动设备作为基准，图片一般使用2倍图或者3倍图
  • 盒子尺寸直接按照设备大小进行布置，和浏览器布局一样
  • img图片设置父级宽度，img宽度100%,会自动适应按比例缩放
  • 背景图使用2倍图或者3倍图，使用background-size设置成需要的大小，强制缩小图片

2.4. 实际开发布局

• 手机端使用一套页面，基于rem布局
• PC和平板一般用的是同一套页面，流体布局

1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局