浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)

移动端自适应布局问题是在不同屏幕尺寸的移动设备上保持网页布局始终合适的问题。常见的解决方案包括响应式、rem/em以及Js动态。

响应式布局

响应式布局是指适配不同宽度的屏幕,使用CSS3的媒体查询(Media Query)来给不同尺寸的设备设置不同的样式。通常响应式布局可以分成三份(移动端、平板、PC端)设置不同的CSS样式。

以两列布局为例,代码如下:

<div class="container">
  <div class="col-1">Column 1</div>
  <div class="col-2">Column 2</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
}

.col-1 {
  flex: 1;
  padding: 10px;
  background-color: blue;
  color: #fff;
}

.col-2 {
  flex: 1;
  padding: 10px;
  background-color: red;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .col-1, .col-2 {
    width: 100%;
  }
}

在这段代码中,.container设置为flex布局,.col-1和.col-2设置为flex:1,使用flexbox实现两列布局。Media Query设置当屏幕宽度小于767px时,使.col-1和.col-2的宽度变为100%。

rem/em布局

rem和em都是相对长度单位,rem是相对HTML根元素的字体大小,而em是相对于自身父元素的字体大小。这两种相对长度单位可以让开发者根据不同屏幕的尺寸自适应地设置元素的大小。

以一个按钮为例,代码如下:

<button class="btn">Click me</button>
.btn {
  font-size: 1rem;
  padding: 0.5em 1em;
  border: solid 1px #eee;
  background-color: #fff;
  color: #333;
}

@media screen and (max-width: 767px) {
  .btn {
    font-size: 2rem;
  }
}

在这段代码中,.btn的字体大小设置为1rem,这个1rem相对于HTML根元素的字体大小。在Media Query设置中,当屏幕宽度小于767px时,.btn的字体大小变为2rem,即根据屏幕尺寸自适应地调整。

Js动态布局

使用JavaScript动态地设置元素的大小也是一种常用的自适应布局方式。

以设置元素高度为屏幕高度的一半为例,代码如下:

<div class="container">
  <div class="box"></div>
</div>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 50%;
  background-color: blue;
}

@media screen and (max-width: 767px) {
  .box {
    width: 100%;
  }
}
var box = document.querySelector('.box');
box.style.height = window.innerHeight / 2 + 'px';

window.addEventListener('resize', function () {
  box.style.height = window.innerHeight / 2 + 'px';
});

在这段代码中,.container设置为100vh高度的flex布局,.box的宽度设置为50%以及蓝色背景。JavaScript动态地设置.box的高度,通过window.innerHeight获取屏幕高度,将.box的高度设置为屏幕高度的一半。同时使用window.addEventListener监听resize事件,当屏幕尺寸发生变化时重新设置.box的高度。

总结

以上是移动端自适应布局的三种常见方式,每一种方式都有其适用的场景,可以根据实际需求选择。同时注意需要考虑不同分辨率的设备以及防止过多的代码导致性能问题。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅谈移动端的自适应布局问题(响应式、rem/em、Js动态) - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • Bootstrap入门书籍之(三)栅格系统

    关于Bootstrap栅格系统,我为您提供以下攻略: Bootstrap入门书籍之(三)栅格系统 什么是Bootstrap栅格系统 Bootstrap栅格系统是一种基础的网格系统,它能够帮助我们快速搭建有规律的网页布局。通过栅格系统,我们可以将一个页面分成12列(column),把12列按照不同的比例分为几个大的块,又将每个大的块分为细的块,这样就可以为页面…

    css 2023年6月10日
    00
  • CSS制作各种样式的彩虹效果

    CSS制作各种样式的彩虹效果的完整攻略如下: 1. 使用渐变实现彩虹效果 使用CSS渐变可以轻松地实现彩虹效果。以下是一个简单的例: .rainbow { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } 上述代码将创建一个类名…

    css 2023年5月18日
    00
  • css绘制透明三角形

    下面是我为你准备的“css绘制透明三角形”的完整攻略: 1. 原理 在CSS中,使用border制作三角形是一种非常常见的技巧。通常情况下,我们可以使用border属性来定义一个元素的边框,然后通过设置一些边框的样式(例如颜色、宽度和样式),来实现用border绘制出一个三角形。 在制作透明三角形时,我们可以使用下面的技巧: 将元素的高度和宽度都设置为0,只…

    css 2023年6月10日
    00
  • 浅谈styled-components的用法

    浅谈styled-components的用法 什么是styled-components styled-components 是 React 应用程序中使用的一种 CSS-in-JS 库。这意味着您可以在组件中编写 CSS,而不是在样式表文件中编写 CSS。这可以防止 CSS 的样式冲突问题,使得代码易于理解和维护。除此之外,styled-components…

    css 2023年6月9日
    00
  • 基于纯JS实现多张图片的懒加载Lazy过程解析

    下面我来详细讲解“基于纯JS实现多张图片的懒加载Lazy过程解析”的完整攻略。 背景 在传统的网页中,所有的图片都会在页面加载的时候一次性加载出来,这样会导致网页的加载速度变慢。为了提升网页的加载速度和用户的交互体验,我们可以使用懒加载技术。 懒加载是指在页面滚动到特定区域时,才开始加载相应的资源。通过懒加载,可以减少网页的加载时间,提升网页的性能,并且能够…

    css 2023年6月10日
    00
  • CSS Div网页布局中的结构与表现

    CSS Div 网页布局是目前网页布局中最常用的一种方式。它采用 CSS 样式表来实现网页的结构和表现的分离,使得开发者能够更好地掌控页面的格式和排版,让页面更加美观,易于阅读和使用。 CSS Div 网页布局中的结构与表现可以分为以下几个步骤: 1.用 HTML 创建页面结构。 首先,在 HTML 中创建基本的页面结构,包括 header、main、foo…

    css 2023年6月10日
    00
  • CSS3实现的闪烁跳跃进度条示例(附源码)

    下面就为您详细讲解CSS3实现的闪烁跳跃进度条示例的完整攻略: 一、实现思路 在HTML代码中创建一个 标签,作为进度条的容器 使用CSS3的动画特性,将进度条进行闪烁跳跃的动画效果 通过JavaScript来动态控制进度条的宽度,实现进度条的进度控制 二、HTML结构 首先,在HTML代码中,需要创建一个 标签,作为进度条的容器。具体代码如下: <d…

    css 2023年6月10日
    00
  • js设置文字颜色的方法示例

    “js设置文字颜色的方法示例”包含以下几个部分: 1. 设置文字颜色的CSS属性 在CSS中,可以使用color属性来设置文字的颜色,语法如下: color: value; 其中value可以是颜色值(如red、#000000等)、rgb值(如rgb(255, 0, 0))、hsl值(如hsl(0, 100%, 50%))等。 在JavaScript中,可以…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部