一、移动web基础
- 京东双十一销售额
- PC: 26%
- 移动端: 74%
- 主流移动站点
- 京东商城手机版
- 淘宝触屏版
- 苏宁易购手机版
(结构: 轮播图、导航栏、产品信息)
- 移动端浏览器
- UC浏览器
- QQ浏览器
- 百度浏览器
- Safari浏览器
(都是基于webkit内核)
- 案例《京东商城》
- 首页(页面制作和JS效果)
- 商品分类(页面制作和JS效果)
PC端的开发技术可以实现吗?不是兼容问题，更多面对的是适配问题。
解决方案:
在《京东商城》移动站点中应用到百分比自适应布局，即是流式布局；
需要对移动端的viewport视图设置；
- 流式布局
宽度随着浏览器改变而改变，内容向着两边填充
(百分比伸缩布局，也是属于流式布局)
- viewport视觉窗口
PC端，要显示图片，是直接将图片渲染到浏览器窗口中；
移动端，要显示图片，不是直接渲染到浏览器窗口中的，而是渲染在虚拟区域中即是viewpot；
（移动端比PC端多了一层viewport，即可以通过设置viewport来控制整体页面的显示）
- width: 设置layout viewport 的宽度，为一个正整数，或字符串"width=device-width"(设备宽度)
- initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale: 允许用户的最大缩放值，为一个数字，可以带小数
- height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable: 否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 分辨率、屏幕尺寸
分辨率(物理像素): 640 * 960
屏幕尺寸: 320 * 480
屏幕像素比: 2:1 (1px需要4个物理像素)【手机不同像素比就会不一样】
【viewport非主流设置体现，例如淘宝，这是为了更好的用户体验。640px/960px，在对于屏幕不同时，通过设置viewport的缩放比例来达到预期效果的，这例如320/480分辨率时，将viewport缩放0.5】
二、案例《京东商城》
/* box-sizing设置盒子宽度从什么开始计算(从边框或者内容或边界中计算)
* 设置所有的都是以边框开始计算宽度，百分比布局容易到值盒子溢出
* 大部分浏览器是基于webkit开发，注意兼容问题兼容
*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 清除移动端默认的点击高亮效果，设置为透明*/
-webkit-tap-highlight-color: transparent;
/* input点击高亮*/
outline: none;
/* 清除移动端默认的表单样式*/
-webkit-appearance: none;
