移动WEB开发

移动WEB开发

重难点

• CSS 3D转换
• Flex伸缩布局
• Less
• rem
• 媒体查询
• Bootstrap
• 移动式网页布局
• 响应式网页布局

1. VSCODE 使用

1.1 常用快捷键

• 向上一行复制
  alt+shift+↑

• 向下一行复制
  alt+shift+↓

• 默认光标在哪一行上是选整个行，直接复制粘贴就可以了

1.2 常用插件
Chinese (Simplified) Language Pack for VS Code, Open in Browser, JS-CSS-HTML Formatter, Auto Rename Tag, CSS Peek

视口

1. 布局视口: layout viewpoint 980px
2. 视觉视口: 用户能看到的区域
3. ideal viewpoint 适合移动端布局

meta视口标签的写法:

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

• 物理像素就是我们说的分辨率，物理像素比就是
• 一个px能显示的物理像素点的个数，就是物理像素比，或者屏幕像素比，比如iPhone 5的物理像素比就是2.0.
• 开发的时候准备开发尺寸2倍的图片，等到放进去的时候再缩小就可以了

2. background-size 背景图片的大小

/*
1. background-size 一个参数就是宽，高度自适应
2. 两个参数就是宽高
3. 百分比就是相对于父盒子的宽度，比如父盒子100px，50%就是50px
4. cover 完全覆盖div盒子，可能有部分背景显示不全
5. contain 宽度和高度等比例拉伸，宽度和高度一边到了就停止了拉伸了
*/
background-size: 500px 300px;

移动端技术解决方案:

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

布局方式

1. 流式布局(百分比布局)
   盒子宽度设置成百分比，给一个最大的宽度max-width:980px和一个最小的宽度min-width:320px

二倍精灵图的做法

1. 先把精灵图等比例缩放为原来的一半 不要保存
2. 之后根据大小测量坐标
3. 注意代码里面的background-size也要写:把精灵图缩放为原来宽度的一半