移动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
视口
- 布局视口:
layout viewpoint 980px
- 视觉视口: 用户能看到的区域
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倍的图片,等到放进去的时候再缩小就可以了
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;}
布局方式
- 流式布局(百分比布局)
盒子宽度设置成百分比,给一个最大的宽度max-width:980px
和一个最小的宽度min-width:320px
二倍精灵图的做法
- 先把精灵图等比例缩放为原来的一半 不要保存
- 之后根据大小测量坐标
- 注意代码里面的
background-size
也要写:把精灵图缩放为原来宽度的一半