移动端页面布局

最新推荐文章于 2024-06-01 10:28:28 发布

暮白寒窗雪

最新推荐文章于 2024-06-01 10:28:28 发布

阅读量2.8k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/tiben/article/details/119154743

版权

移动端页面布局

引言

在移动Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面。此外，我们还可以将上述三大布局与媒体查询结合起来创建响应式页面，实现了一个页面同时兼容PC端和移动端。为了提高CSS样式代码的编写效率，我们可以使用Sass或Less编写复用性更优的CSS代码。读者在掌握了这些技术后，就已经可以编写响应式页面了，但是为了提高开发效率，我们在开发中还会引入Bootstrap框架，利用它来快速构建响应式页面

一、移动端页面常用布局

移动端页面的常用布局方法包括流式布局、弹性盒布局和Rem适配布局
（1）流式布局也称为百分比自适应布局，它是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高，例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。
（2）弹性盒布局是CSS 3中的一种新布局模式，可以轻松地创建响应式网站布局。该弹性盒布局为盒模块增加了灵活性，可以让人们告别浮动（float），完美地实现垂直居中。目前它得到几乎所有主流浏览器的支持。
（3）Rem适配方案一般采取Less+Rem+媒体查询来实现响应式布局设计
Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。rem是CSS 3中新增的一种相对长度单位。当使用rem单位时，根节点的字体大小（font-size）决定了rem的尺寸
注：流式布局、弹性盒布局和Rem适配布局方式并不是独立存在的，在实际开发过程中往往是相互结合使用的，多种方式融合在一起实现移动端的屏幕适配的方法，称之为混合布局，目前很多公司会采取这种布局方式

（一）流式布局

在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备，在移动设备和跨平台（响应式）网页开发过程中，多数使用流式布局
1、概念：流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局
2、实现方法：将CSS固定像素宽度换算为百分比宽度，其换算公式如下
目标元素宽度 / 父盒子宽度 = 百分数宽度
示例：固定布局和百分比布局区别
HTML代码

<body>
  <header>header</header>
  <nav>nav</nav>
  <section>
    <aside>aside</aside>
    <article>article</article>
  </section>
  <footer>footer</footer>
</body>

①默认效果

<style>
  body > * {
   
    width: 980px;height: auto;margin: 0 auto;margin-top: 10px;
    border: 1px solid #000;padding: 5px;
  }
  header {
   height: 50px;}
  section {
   height: 300px;}
  footer {
   height: 30px;}
  section > *