响应式页面布局处理-一篇打尽

纯pc端响应式

pc端平常用到的响应式布局 大致就如下三种,当然也会有其他方法,欢迎评论区补充

  • 将div height、width设置成100%
  • flex布局

flex布局主要是将flex-wrap: wrap,

最后,你可以通过给子元素设置 flex 属性来控制它们的大小和扩展方式,flex 属性是 flex-grow, flex-shrink 和 flex-basis

  • grid布局

Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列

对于响应式页面可以由下面例子使用(配合媒体查询)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <style>
    .container{
      width: 100%;
      height: 100%;
      box-sizing:border-box;
      padding: 20px 40px;
      display: grid;
      align-items: start;
      column-gap: 20px;
      row-gap: 20px;
      grid-template-columns: repeat(6, 1fr);
      flex-wrap: wrap;
      overflow-y: auto;
      .item{
        border: 1px solid black;
        height: 220px;
        min-width: 60px;
      }
    }
    @media screen and (max-width: 1000px) {
      .container{ 
        grid-template-columns: repeat(5, 1fr);
    }
}
  </style>
</body>
</html>

2.移动端h5兼容pc端

这个没有别的方法了,只有媒体查询写两套样式代码

h5移动端:

使用em和rem 相对单位,木墙项目大多使用第三方插件实现,但他们的原理其实是类似的:

引入javascript脚本来实现font-size很屏幕之间的计算 ,就是拿到视口的

宽度 根据比例设置相应的根元素字体 从而设置相对参数的基准

javascript 复制代码
(function(doc, win) {
            // 获取到html这个标签
            let docEL = doc.documentElement;
            let resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",
                recalc = function() {
                    // 获取到档期啊设备的宽度
                    const clientWidth = docEL.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth > 750) {
                        // 给html设置一个内联样式
                        docEL.style.fontSize = "100px";
                    } else {
                        // 逻辑:以iphone678 为标准 算出来font-size 50px
                        docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
                    }
                }
            recalc();
            win.addEventListener(resizeEvent, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false)
        })(document, window)
相关推荐
齐 飞1 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹18 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry42 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js