移动web开发-day01-流式布局

移动web开发-day01-流式布局

01-移动WEB开发流式布局导读

• 目录
  • 移动端基础
  • 视口
  • 二倍图
  • 移动端调试
  • 移动端技术解决方案
  • 移动端常见布局
  • 流式布局
  • 京东移动端首页制作
• 目标
  • 能够知道移动web的开发现状
  • 能够写出标准的viewport
  • 能够使用移动web的调试方法
  • 能够说出移动端常见的布局方案
  • 能够描述流式布局
  • 能够完成京东移动端首页

02-移动端基础

• 移动端兼容比PC端要好，主要处理webkit内核即可

• 移动端设备过多，尺寸不一，碎片化严重，我们无需关注，常用px

• 开发主要针对的移动端设备是手机

• 移动端调试方法：

  • 浏览器开发者工具（主要）
  • 本地服务器，手机和电脑在同一局域网内
  • 外网服务器

03-视口

• 视口就是浏览器显示页面内容的屏幕区域
  • 布局视口（了解即可）：显示整个网页布局，为PC端设计的网页在移动端上字体和元素看上去很小，一般需要手动缩放网页
  • 视觉视口（了解即可）：显示网站某个区域（透过窗户看到的外面的区域），一般需要手动滑动网页
  • 理想视口（主要）：设备有多宽，布局就多宽，需要手动添加meta视口标签通知浏览器处理

04-meta视口标签

meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”
以上是标准的设置，不用死记硬背，只需知道有这么个东西，直接复制粘贴即可

各属性说明：

• width：视口的宽度，可以设置device-width特殊值，表示设备宽度
• initial-scale：初始化缩放比
• maximum-scale：最大缩放比
• minimum-scale：最小缩放比
• user-scalable：用户是否可以缩放，yes或no（1或0）

05-物理像素与物理像素比

• 物理像素：指的是屏幕显示的最小颗粒，是真是存在的，厂商在出厂时就设置好了的，就是我们常说的分辨率
• pc端：1px=1个物理像素，移动端：1px不一定等于1个物理像素
• 物理像素比：用几个物理像素点来显示1px

06-二倍图

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

07-背景缩放background-size

• 该属性规定背景图像的尺寸
• 语法：background-size: 宽 高;
  • 只写一个参数：等比缩放
  • 写%：是相对于父盒子的
  • cover：等比拉伸，当完全覆盖时停止，图片可能有部分区域显示不全
  • contain：等比拉伸，当宽或高到达边缘时停止，盒子可能有部分空白

08-移动端开发选择

• 单独制作是主流，响应式其次，因为需要花大量精力去调兼容性
• 一般网址前面加m.是移动端网站

09-移动端技术解决方案

• 放心使用h5标签和c3样式，主要考虑webkit内核
• css初始化：normalize.css
• c3盒子模型：box-sizing
  • 传统盒子模型：宽度不包含padding和border
  • c3盒子模型：宽度包含padding和border

10-移动端特殊样式

• c3盒子模型：box-sizing: border-box;
• 清除点击高亮：-webkit-tap-highlight-color: transparent;
• 清除按钮和输入框默认样式：-webkit-appearance: none;
• 禁用图片和a链接长按弹出菜单：img, a { -webkit-touch-callout: none; }

11-移动端技术选型

• 单独制作
  • 流式布局
  • flex弹性布局（墙裂推荐）
  • less+rem+媒体查询
  • 混合布局
• 响应式
  • 媒体查询
  • bootstrap

12-流式布局

• 流式布局就是百分比布局
• 有时需要配合max-width和min-width使用