01-移动web开发

一、移动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代表允许

• 分辨率、屏幕尺寸

  分辨率(物理像素): 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;

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。