浅谈移动端的自适应布局问题(响应式、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日

相关文章

  • 用js实现的DIV+CSS编辑器代码

    使用js实现的DIV+CSS编辑器可以帮助前端开发人员快速创建和修改网页的样式。以下是实现DIV+CSS编辑器代码的完整攻略。 HTML布局 首先,我们需要在HTML页面中定义一个容器DIV,用于显示编辑器。在这个DIV中创建两个子元素,分别是编辑区和预览区,如下所示: <div id="container"> <div…

    css 2023年6月10日
    00
  • js与css的阻塞问题详析

    关于“js与css的阻塞问题详析”的攻略,这里给出以下详细讲解: 什么是阻塞问题? 在前端开发中,阻塞(blocking)通常指浏览器因等待某个操作完成而暂时停滞无法继续执行的现象。在 JS 和 CSS 中都存在阻塞问题。 JS阻塞问题 在 HTML 文件中通过 标签包含的 JavaScript 代码通常是同步加载的,它会以阻塞的形式阻塞页面其它资源的下载和…

    css 2023年6月10日
    00
  • CSS中怎么让DIV居中亲自实验得出的结论

    在 CSS 中,让 DIV 元素居中是一个常见的需求。以下是关于如何让 DIV 元素居中的完整攻略。 方法一:使用 margin 属性 使用 margin 属性是让 DIV 元素居中的一种常见方法。以下是一个示例: <div class="container"> <div class="box"&gt…

    css 2023年5月18日
    00
  • AngularJS2 与 D3.js集成实现自定义可视化的方法

    下面是详细讲解“AngularJS2 与 D3.js集成实现自定义可视化的方法”的攻略: 前置条件 在开始本攻略前,需要确保你已经了解以下技术: AngularJS2框架 D3.js数据可视化库 TypeScript语言 步骤一:创建AngularJS2项目 首先需要创建一个AngularJS2项目,具体步骤如下: 安装Angular CLI:在命令行中运行…

    css 2023年6月10日
    00
  • 详解DIV+CSS布局的好处和意义

    详解DIV+CSS布局的好处和意义 什么是DIV+CSS布局 DIV+CSS布局是一种网页制作方法,它使用HTML中的 标签来分隔页面结构,使用CSS样式来定义该结构的外观。与传统的表格布局方式相比,DIV+CSS布局更加灵活、语义化,更利于SEO优化。 DIV+CSS布局的好处 灵活性更高:使用DIV+CSS布局的网站结构更加清晰,CSS样式文件和HTML…

    css 2023年6月9日
    00
  • js实现滚动条滚动到页面底部继续加载

    JS如何实现滚动条滚动到页面底部继续加载数据 随着Web技术的不断发展,越来越多的网站需要实现无限滚动( Infinite scrolling )功能,即在页面滚动到底部时不刷新页面,而是继续加载更多的内容。这一功能已经成为现代网页设计的标配。本文将向您介绍如何使用JavaScript来实现无限滚动的功能。 一、window对象的scroll事件 使用Jav…

    css 2023年6月10日
    00
  • html的基本使用包括链接、样式表、span和div等等

    下面我将详细讲解关于HTML的基本使用,包括链接、样式表、span和div等的完整攻略。 链接 在HTML中,链接是指通过在文本或图片上添加链接,使得用户可以通过点击该文本或图片来跳转到另一个网页或同一网页上的其他部分。HTML中使用<a>标签来实现链接功能,其中href属性用来指定链接的URL地址,例如: <a href="ht…

    css 2023年6月9日
    00
  • DIV+CSS 三栏布局实例代码

    接下来我将为您介绍详细的“DIV+CSS 三栏布局实例代码”攻略: 一、前置知识 在学习“DIV+CSS 三栏布局实例代码”之前,我们需要掌握以下前置知识: HTML和CSS基础语法:学会如何创建HTML文档,以及如何在CSS中定义样式。 盒子模型:了解块级元素和内联元素的概念,掌握padding、border和margin等属性的使用方法。 浮动和清除浮动…

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