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

纯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)
相关推荐
前端拾光者28 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome