HTML5：移动端开发入门

最新推荐文章于 2024-05-30 15:19:04 发布

Yivisir

最新推荐文章于 2024-05-30 15:19:04 发布

阅读量3.8k

点赞数

分类专栏：前端 css javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/yivisir/article/details/111434287

版权

HTML5:移动端开发入门

传统桌面端网站的显示窗口往往都是在1024X768的分辨率以上开发的，远远大于移动端的窗口大小。为了使桌面端网页能在移动端正常显示，移动端浏览器推出了一种名为“viewport”的虚拟窗口，在不同的设备中，这一窗口的大小都不同。（windows为1024px，ios为980px）
为了使移动设备能完整显示页面，viewport往往被浏览器加上缩放以自适应宽度，让980px的网页显示在320px的移动设备上。这就是为什么我们有些网页在手机上看起来文字和图片都很小。（此时用JavaScript获取页面宽度时，仍然为980px）
在移动端页面中，我们可以在标签中添加meta标签，对viewport加以设置。
```
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
```
上面这段代码做了两件关键的事情：
1. 设置viewport的宽度为设备的宽度；
2. 设置scale=1.0，即窗口默认不缩放；
如果你不希望用户缩放你的页面，可以像下面这样做：
```
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
```
即锁定页面缩放为1.0，组织用户进行缩放行为。

百分比布局比传统像素布局的优势在于，当用户进行缩放时，页面布局不会因为宽度改变而混乱。
当用户缩放过大时，可能造成图片或文字部分被遮挡的情况，可以通过以下方法来解决：
1. 对于图片，为其设置padding；
2. 对于文字，可用vw来替代px。vw代表文字对viewport的宽度，vh代表高度，在vw体系中，viewport的宽度设置为100vw，依次来换算相对于的文字大小。

移动端的分辨率五花八门，高分辨率图片在低分辨率的手机里渲染压力大，低分辨率图片在高分辨率手机里又十分模糊，两种情况都非常糟糕。
对此，CSS3提供了一种名叫Media Query的显示规则。
```
    <link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
```
上面的代码中，使用link标签引入外部css文件，同时增添了media属性。下面对内容进行解释：
1. screen代表媒体的类型为电脑或者移动终端显示屏幕（可用值：all,print,tv等）；
2. and表示“与”的关系；
3. (max-width: 600px)表示媒体的特性，需要放置在圆括号中，代表媒体最大的宽度就是660px；
4. 所以整个media的含义是：当屏幕宽度小于等于600px时，该css文件适用。
下面进行举例：
1. screen and (min-width: 400px)：当屏幕宽度大于等于400px时，应用该css文件；
2. screen and (min-width: 400px) and (max-width: 600px):当屏幕宽度大于400px小于600px时，应用该css文件；
3. all and (max-device-width: 480px)：当设备宽度小于等于480px时，应用该css文件；
4. all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)：当所有媒体设备宽度介于481px与1024px之间时，应用该css文件。当portrait改为landscape时，则表示匹配横屏的媒体。

有了media query，我们就可以针对不同屏幕分辨率的设备分别制作相应的css文件：

    <!-- 针对所有设备的基础样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- <=480的手机可用 -->
    <link rel=

关注

专栏目录