HTML5：移动端开发入门

HTML5:移动端开发入门

一、前言

• 常见的移动端开发分为移动版网站和响应式设计。
• 移动端开发可以让技术人员专注于移动端的页面优化，而无需在意桌面版的兼容，但页面一旦改动内容，维护成本就翻倍了；
• 响应式设计让开发人员只需维护一份项目，节省开发和维护成本，不过缺点是需要做好移动端和桌面端的兼容，也十分考验页面设计。
• 两种开发方式孰强孰弱，暂无定论，本博客主要探讨一下移动端开发的技巧。

二、移动端开发技巧

1. Viewport设置

• 传统桌面端网站的显示窗口往往都是在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，组织用户进行缩放行为。

2. 百分比布局

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

3. 弹性布局：Flex

• 传统的网页充斥了大量的float，对浏览器渲染性能具有很大压力。对此，有一种更加灵活的弹性盒子模型——Flex布局。
• 关于弹性布局的相关知识，请跳转MDN网站进行学习，这里不再赘述：

4. Media Query

• 移动端的分辨率五花八门，高分辨率图片在低分辨率的手机里渲染压力大，低分辨率图片在高分辨率手机里又十分模糊，两种情况都非常糟糕。
• 对此，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=

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/ydkf/3405.html