移动Web开发涉及到一些基本的概念和技术。在本文中,我们将介绍一些关键的知识点。
1. 像素基础
在移动Web开发中,像素是一个重要的概念。以下是一些与像素相关的基本知识:
- px: CSS像素,浏览器使用的抽象单位。
- dp, pt: 设备无关像素。
- devicePixelRatio: 设备像素缩放比例。
2. Viewport
Viewport是指移动设备上用于显示网页内容的区域。以下是一些关于Viewport的基本知识:
- iOS的Viewport通常是980px;而安卓设备的Viewport大小则不确定。
- 为什么不使用默认的980px布局Viewport?原因是宽度不可控制,不同系统设备的默认值可能不同,导致页面在缩小模式下显示不友好、链接不可点以及需要滚动。
- 通过meta标签来改变默认Viewport的值。
3. Viewport meta标签
使用meta标签可以更改Viewport的默认值。以下是一些常用的Viewport设置:
lt;meta name"viewport" content"namevalue,namevalue"gt;
1. width: 设置布局Viewport的特定值,但为了适应不同尺寸的手机屏幕,通常使用device-width来自适应用户的屏幕大小。
2. initial-scale: 设置页面的初始缩放比例,公式为。
3. minimum-scale: 最小缩放比例。
4. maximum-scale: 最大缩放比例。
5. user-scalable: 用户是否可以缩放。
4. Viewport 编码
以下是一些关于Viewport编码的方案:
方案一:设备实际宽度设计(常用)
手机宽度320px。(按照这个尺寸重新设计)
方案二:flexbox弹性盒子布局
父元素使用display: -webkit-flex,子元素使用flex: 1来占据父容器的比例。
方案三:flex弹性盒子模型
通过指定width和flex属性来混合划分空间。
5. 弹性图片
移动Web中,弹性图片是一个重要的概念。以下是一些关于弹性图片的知识点:
- 使用max-width: 100%可以让图片在容器中自适应大小。
6. 移动Web样式特别处理
在移动Web开发中,有一些样式需要特别处理。以下是一些常用的处理方法:
- 一像素边框:在Retina屏幕下,使用1px渲染边框会出现模糊的问题,可以使用0.5px渲染,并通过scaleY(0.5)进行缩放。
- 相对单位rem:根据父节点的font-size来变化,可作为全局统一的度量单位。
- 多行文本溢出:使用text-overflow: ellipsis和-webkit-box-orient: vertical等属性实现文本溢出省略号。
7. 300毫秒故事
移动Web上的click事件响应通常会有300毫秒的延迟。可以使用Tap事件代替click事件,或者使用库例如Zepto.js来解决这个问题。