移动端开发详解(1)

最新推荐文章于 2024-04-26 22:29:03 发布

浴盆

最新推荐文章于 2024-04-26 22:29:03 发布

阅读量103

点赞数

分类专栏：移动端web 文章标签：移动布局 html5

移动端web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

移动端和桌面端的区别

首先一个明显的区别就是屏幕大小，在桌面端，分辨率非常大，从前960像素的页面宽度成为主流，而如今桌面端分辨率基本超过了1280 * 800，当前一些重内容的网站开始使用更大的页面尺寸，如在页面宽度上，京东采用了1210像素，而淘宝使用了1190像素。而对于移动端来说，常见的分辨率都是320 * 480, 360 * 640, 640 * 960这样的小尺寸，所以布局更多地运用垂直方向上的纵深。
另一个不同之处在于文件的大小尺寸。太大的页面使得用户需要长时间等待加载，而且用户的手机流量页非常宝贵，因此，在移动端页面中，我们尽可能对页面进行精简，对文件尺寸进行压缩。
桌面端和移动端的第三个不同之处在于，桌面端拥有强大的性能，可以尽情使用阴影，动画等H5特性，而移动端在性能上则弱很多，在页面中包含太多渲染，都会导致设备性能的降低，并降低用户的电量负担。
桌面端和移动端的交互方式页互不相同，在桌面端操作几乎都是由鼠标完成，期间可以发生单击，经过，移出等鼠标行为。而在移动端，鼠标被换成了手指，移动端缺少键盘的情况下，用户的输入难度要远大于桌面端，因此表单等页面元素的交互效果需要重新考虑。此外，由于手指精度不如鼠标，还存在一些更深层次的用户体验的问题，如怎样使链接，按钮更容易被准确触摸到等。
再者，桌面端和移动端的设计方式也互不相同，桌面端网站的设计通常是固定布局，设计元素的大小和内容的显示位置都精确到像素，
网站的内容主体有着固定的宽度。相比之下，移动端更强调设计的灵活性，网站内容的排布不局限于某个特殊的浏览器窗口大小，如菜单栏在较大屏幕中为横向显示，在较小屏幕分辨率屏幕中则为纵向显示。
最后是浏览器兼容性，桌面的浏览器的兼容性大家都懂的，而在移动端，绝大多数的移动设备浏览器目前都采用了Webkit内核，或基于该内核开发。

viewport设置

在移动端开发中，我们首先要弄清楚浏览器屏幕和显示窗口之间的区别。在移动设备中，屏幕是浏览器可视的那部分区域，屏幕的宽度往往只有320像素或者640像素，考虑到传统的桌面端网站都是在高分辨率下浏览的，为了桌面端页面能够在移动端正常显示，移动端浏览器虚拟出了一种名为viewport的显示窗口，在不同设备中这一窗口大小不同，但都比移动设备的屏幕大。为了使移动设备能够完整显示网页，尽可能不出现横向滚动条，viewport往往被浏览器自动加以缩放以适应屏幕，这就是我们在手机浏览器中访问页面时，页面文字和图片元素都显得很小，宽度值又显示为980像素的原因。
所以在移动端页面中，我们可以在<head>中加入meta标签，对viewport进行专门设置：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

以上代码做了两件事，一是设置viewport的宽度为device-width，即显示窗口宽度等于设备宽度，就是说将原本980像素的viewport更改为屏幕实际的320像素宽度。二是设置initial-scale的属性为1.0，即窗口默认不缩放，以便于以1比1的比例提供最好的体验。
此外我们希望页面能呈现手机app那样的显示效果，此时可以在meta代码中设置viewport的user-scalable(用户可缩放)属性值为no，maximum-scale(最大缩放值)属性值为1，以锁定页面的缩放，避免用户操作屏幕时触发缩放行为而对页面效果产生影响：

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

百分比布局

由于移动端尺寸的特殊性，我们很难像在桌面端那样设置一个固定的页面最小宽度，因此在移动端页面开发中往往采取百分比的动态布局方式，我们来看一段html代码

   <div class="common">
       <img src="sysuzhyupeng-1.png" alt="1">
       <h1>sysuzhyupeng1</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-2.png" alt="2">
       <h1>sysuzhyupeng2</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-3.png" alt="3">
       <h1>sysuzhyupeng3</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-4.png" alt="4">
       <h1>sysuzhyupeng4</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-5.png" alt="5">
       <h1>sysuzhyupeng5</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-6.png" alt="6">
       <h1>sysuzhyupeng6</h1>
   </div>

这样在页面中为从上到下排列，如果想把以上的图文按两列的方式输出，那么可以设置每个div的宽度为50%，代码如下：

   .common {
       width: 50%;
       text-align: center;
       float: left;
       box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset;
   }

以上代码将div的宽度设为50%，还设置了左浮动形成排列效果，这就实现了两列布局。那么三列布局也是同样的原理，只不过100除以3无法得到一个整数，我们可以用33.3%来近似地加以设置：

   .common {
      width: 33.33%;
   }
   .common img {
      width: 60%;
   }

为了防止图片过大超出区域，我们设置图片为容器宽的60%。解决了图片的百分比显示后,我们继续将屏幕缩小，会发现有些文字超出了div的范围。
要解决文字的自适应显示，可以使用vw或vh这样的相对字体大小单位，vw代表文字相对于viewport的宽度，vh则代表相应的高度。在vw的体系中，默认将整个viewport的宽度设置为100vw，以此相对换算文字的大小

   .common h1{
      font-size: 5vw;   
   }

以上代码中，我们设置了h1元素的字体大小为5vw,也就是等于屏幕宽度的1/20（5vw/100vw），当屏幕为400像素时，字体大小为20像素。
要实现更多的列的显示效果，只需要将div的宽度百分比均分即可。而有时候希望元素与元素，以及元素与屏幕边缘之间留出一定间距，这可以通过margin属性来实现，如一个两列布局，每一列的宽度为40%，则去掉两列内容宽度后，屏幕还剩下20%的空间，将其分摊给每一列的左右两侧

   .common {
      margin: 5%;
      width: 40%;
   }

注意，在margin和padding以百分比做为计量单位时，不论宽高，取值的基础都是来自于父元素的宽度(width)。如果父元素宽高为100 * 200，则子元素四边的margin实际值都是5像素，而非上下10像素，左右5像素，这时只需要将上下的margin值修改为绝对值，如10像素

   .common {
       margin: 10px 5%;
   }

同时我们需要两列之间的间隔只有5像素，所以要使用nth-child()这一伪类选择器

   .common: nth-child(even){
      margin-left: 0;
   }

有关Flexbox布局等内容请看另一篇博文移动端开发详解(2)

浴盆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端开发详解(1)

移动端和桌面端的区别首先一个明显的区别就是屏幕大小，在桌面端，分辨率非常大，从前960像素的页面宽度成为主流，而如今桌面端分辨率基本超过了1280 * 800，当前一些重内容的网站开始使用更大的页面尺寸，如在页面宽度上，京东采用了1210像素，而淘宝使用了1190像素。而对于移动端来说，常见的分辨率都是320 * 480, 360 * 640, 640 * 960这样的小尺寸，所以布局更多地运用垂直
复制链接

扫一扫