web移动端布局方法

最新推荐文章于 2024-05-13 00:02:56 发布

阳光下的冷静

最新推荐文章于 2024-05-13 00:02:56 发布

阅读量5.9k

点赞数 10

分类专栏： css bootstrap 移动端文章标签：移动端布局 rem布局流式布局响应式布局弹性布局

本文链接：https://blog.csdn.net/m0_37686205/article/details/88973456

版权

css 同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

bootstrap

4 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

移动端布局分类

移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。

流式布局（百分百布局）：
定义：
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
优点：
px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备，在大屏小屏自动适应,特别适合于电商网站的布局等简单的页面,比如说列表页,写法比较简单,不用考虑太多，
缺点:
-页面虽然展示正常,却不是等比缩放,在高清屏上难免看起来怪怪的(px换算统一除以2,在dpr是2.5或者3上看起来偏小)
rem布局
定义：
rem:css(相对单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html的font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,则可起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的.
注意：
用rem布局,可以起到等比例放大缩小的效果,但有时我们难免要对某个元素在不同屏上做一些特定的处理,我们马上就想起了媒体查询,是的,你如果单纯用rem布局,没有去动态修改viewport的缩放值,那是可以用媒体查询的,那么除了用媒体查询还有没有其他方法呢?答案是有的,根据dpr,我们在不同屏动态算出html的font-size时,顺便把dpr算出来加到html里面去,这样我们可以通过css去控制
局限条件：
主要用来适配手机和ipad,除了手机和ipad，其他的都不能适配。
rem布局中的尺寸计算
本质是等比缩放，一般是基于宽度，试想一下假设UE图能等比缩放，假设我们将屏幕宽度平均分成100份，每一份用x表示，x=屏幕宽度/100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*目标：就是把box适配到常见的iphone5 三星 iphone6手机上*/
      /*1.通过切图工具，我们得知 box在设计图（640px）上的大小是16*16px */
      /*2.把设计图分成20份 1份=32px*/
      /*3.iphone5的宽度=320  iphone6的宽度=375  这里指的是设备独立像素*/
      /*4.使用媒体查询*/
      @media screen and (width: 320px){
          html {
              /*在320宽的屏幕中 一份是16px*/
              font-size: 16px;/*320/20=16*/
          }
      }
      /*三星*/
      @media screen and (width: 360px){
          html {
              /*在360宽的屏幕中 一份是18px*/
              font-size: 18px;/*360/20=18*/
          }
      }
      @media screen and (width: 375px){
          html {
              /*在375宽的屏幕中 一份是18.75px*/
              font-size: calc(375px/20);/*375/20=18.75*/
          }
      }
      .box {
          /* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小，即16/32*18或16/32*16，就能得到px为单位的*/
          width: 0.5rem;
          height: 0.5rem;
          background-color: red;
      }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

响应式布局(使用媒体查询这个工具实现)
定义：
简而言之，就是一个网站能够兼容多个终端。CSS3中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。
核心语法：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

案例：

@media screen and (width: 320px){
          body {
              background-color:red
          }
}
@media screen and (width: 375px){
          body {
              background-color:green
          }
}

第三方框架使用
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作，当然也可以自己写响应式。

bootstrap中常用类名：

col-xs-*超小屏幕（移动设备） 768px以下
col-sm-*小屏设备 768px-992px
col-md-*中等屏幕 992px-1200px
col-lg-*宽屏设备 1200px 以上

弹性布局
定义：
高度定死，宽度自适应，元素都采用px做单位。随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在那个宽度需要调整的时候使用响应式布局就行（比如网易新闻），这就实现了适配。
viewport固定值：

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

阳光下的冷静

关注

10
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
web移动端布局方法

移动端布局分类移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。流式布局（百分百布局）：定义：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。优点：px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备，在大屏小屏自动适应,特别适合于电商...
复制链接

扫一扫