01-移动WEB开发_流式布局

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45555964/article/details/100586984

移动WEB开发_流式布局

00-流式布局介绍

• 百分比布局，也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 配合max-width和min-width:320px使用

01-移动端基础

• 移动端设备屏幕尺寸非常多，碎片化严重、
• 移动端调试方法
  • Chrome DevTools（谷歌浏览器）的模拟手机调试
  • 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
  • 使用外网服务器，直接IP或域名访问

02-视口viewport

视口（viewport）指浏览器显示页面内容的屏幕区域

• 布局视口 layout viewport
• 视觉视口 visual viewport
• 理想视口 ideal viewport

03-meta视口标签

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

最标准的viewport设置

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

04-物理像素&物理像素比

• 物理像素：屏幕显示的最小颗粒，就是厂商设置好的分辨率
• 物理像素比：用几个物理像素点显示1px
• 开发时1px不一定等于1个物理像素
• lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

05-二倍图

• 问题描述：一张同样尺寸大小的图片，在PC端1px是用一个物理像素点来显示，而在移动端1px可能是用4个或者更多的物理像素点来显示，所以在PC端中显示没问题，而放到物理像素比高的移动设备中就造成了图片模糊
• 解决方法：准备的图片比实际开发的尺寸大2倍或多倍的图片，手动把这个图片缩小至原定尺寸，这样在移动端显示时就不会模糊
• img标签：用width和height控制
• 背景图片：用background-size控制

06-背景图片缩放background-size

    background-size：width height；

• 单位：长度|百分比|cover|contain
• %：当前自身属性
• cover：等比例缩放，完全覆盖父盒子区域，可能有部分区域显示不全
• contain：等比例缩放，当宽或高其中一个属性到达父盒子边缘停止缩放，可能会有部分空白
• 只指定了一个参数时，另一个参数等比例缩放

07-移动端开发选择

• 单独制作移动端页面（主流）
  • 例如：京东官方（流式布局）
  • 通常情况下，网址域名前面加 m(mobile)
  • PC端和移动端为两套网站，专门针对移动端适配的一套网站
• 响应式页面兼容移动端（其次）
  • 例如：三星官方
  • PC和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
  • 需要大量精力调试兼容性

08-移动端技术解决方案

• 移动端浏览器兼容问题

  • 移动端浏览器基本以 webkit 内核为主，考虑webkit兼容性问题就行
  • 私有前缀只考虑添加webkit即可

• CSS初始化：normalize.css

  • Normalize.css：保护了有价值的默认值
  • Normalize.css：修复了浏览器的bug
  • Normalize.css：是模块化的
  • Normalize.css：拥有详细的文档
  • 官网地址： http://necolas.github.io/normalize.css/

• CSS3盒子模型：box-sizin

  • 传统盒子模型：盒子的宽度 = width + border + padding
  • CSS3盒子模型：盒子的宽度= CSS中设置的宽度width
  • CSS3中的盒子模型， padding 和 border 不会撑大盒子
  • PC端如果完全需要兼容，用传统模式，如果不考虑兼容性，选择 CSS3 盒子模型

/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

09-移动端特殊样式

   /*CSS3盒子模型*/
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /*点击高亮我们需要清除清除设置为 transparent 完成透明*/
   -webkit-tap-highlight-color: transparent;
  /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
  -webkit-appearance: none;
  /*禁用长按页面时的弹出菜单*/
  img,a { -webkit-touch-callout: none; }

10-移动端技术选型

• 移动端单独制作（主流）

  • 流式布局（百分比布局）
  • flex 弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

• 响应式（其次）

  • 媒体查询（原生）
  • bootstarp（框架）