响应式布局学习笔记(多屏幕尺寸使用同一套前端代码)

已于 2022-09-07 17:05:47 修改
阅读量160 收藏
点赞数
文章标签： 前端 学习 css
于 2022-09-07 17:05:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44152977/article/details/126749502
版权

媒体查询

  • 为不同尺寸的屏幕设定不同的css样式

媒体查询的参数

  • 1.width , height 浏览器可视宽度，高度（注意拉动的位置）
  • 2.device-width 设备屏幕的宽度
  • 3.device-height 设备屏幕的高度

尺寸的顺序

  • 屏幕尺寸由小到大
  • 代码开头由max-device-width --> (min and max) --> max

flex布局

  • 1.flexiableBox 即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。
  • 2.符合响应式的特点
  • 主轴： 如果横向排列，x为主轴，y为交叉轴，纵向反之。
  • 交叉轴：如上。

flex-direction 方向设定

  • 1.row 默认值，按左到右横向显示
  • 2.row-reverse ， 由右向左
  • 3.column ， 垂直显示，由上到下
  • 4.column-reverse ， 由下到上

flex-wrap 是否换行

  • 1.nowrap 默认值，不换行，不换列
  • 2.wrap 换行换列
  • 3.wrap-reverse 换行或换列，但以相反顺序。

flex-flow 简写模式 表示排序，换行。

  • flex-flow:row wrap;

justify-content 处理剩余空间，间距

  • 1.flex-start 从左到右挨着
  • 2.flex-end 从右到左挨着
  • 3.center 居中显示
  • 4.space-between 平均分布，两边不留间隔空间。
  • 5.space-around 平均分布，两边留有一半间隔空间

align-items 设置每个flex元素在交叉轴上的默认对齐方式，实现子元素上中下。

  • 1.flex-start 位于容器开头
  • 2.flex-end 位于容器结尾
  • 1.center 居中

其他属性，设置子对象

  • 1.flex-basis 设置弹性盒模型伸缩基准值。
  • 2.flex-grow 设置弹性盒子的扩展比率
  • 3.flex-shrink 设置弹性盒子的缩小比率
  • 4.flex 以上三种的所需。
  • 特殊写法及含义
    • 1.flex:auto 作用flex:1 1 auto
    • 2.flex:none 作用flex:0 0 auto
    • 3.flex:0% 作用flex:1 1 0%
    • 4.flex:100px 作用flex:1 1 100px
    • 5.flex:1 作用flex:1 1 0%

rem的使用方法

  • 指相对根元素的字体大小的单位

em 有继承关系干扰。

体验媒体查询代码：

    <style>
        #div0 {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        @media screen and (min-device-width: 200px) and (max-device-width: 300px) {
            #div0 {
                background-color: red;
            }
        }
        @media screen and (min-device-width: 301px) and (max-device-width: 500px) {
            #div0 {
                background-color: blue;
            }
        }
    </style>

媒体查询参数设置

    <style>
        #div0 {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
        /* 监听的是浏览器的宽度 */
        @media screen and (min-width: 200px) and (max-width: 700px) {
            #div0 {
                background-color: red;
            }
        }
        @media screen and (min-width: 701px) {
            #div0 {
                background-color: blue;
            }
        }
    </style>

案例分享，三行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div0 {
            width: 100%;
            /* height: 200px; */
            /* background-color: aqua; */
        }
        #div0 div {
            float: left;
            /* border: 1px solid #000; */
            height: 50px;
            /* width: 33%; */
        }
        #div0 div:nth-child(1){
            background-color: red;
        }
        #div0 div:nth-child(2){
            background-color: green;
        }
        #div0 div:nth-child(3){
            background-color: blue;
        }
        /* 显示1行，三个div */
        @media screen and (max-device-width: 768px) {
            #div0 div {
                width: 100%;
            }
        }
        /* 显示2行，三个div */
        @media screen and (min-device-width: 769px) and (max-device-width:800px) {
            #div0 div {
                width: 50%;
            }
        }
        /* 显示3行，三个div */
        @media screen and (min-device-width: 801px){
            #div0 div {
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div id="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

媒体查询外部样式引用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里使用外部样式导入 -->
    <link rel="stylesheet" href="./css/css1.css" media="(max-device-width: 768px)">
    <link rel="stylesheet" href="./css/css2.css"
    media="(min-device-width: 769px) and (max-device-width:800px)">
    <link rel="stylesheet" href="./css/css3.css"
    media="(min-device-width: 801px)">
    <style>
        #div0 {
            width: 100%;
            /* height: 200px; */
            /* background-color: aqua; */
        }
        #div0 div {
            float: left;
            /* border: 1px solid #000; */
            height: 50px;
            /* width: 33%; */
        }
        #div0 div:nth-child(1){
            background-color: red;
        }
        #div0 div:nth-child(2){
            background-color: green;
        }
         #div0 div:nth-child(3){
            background-color: blue;
         }
    </style>
</head>
<body>
    <div id="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

flex布局演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            display: flex;
            width: 500px;
            /* 排序 */
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column;
            flex-direction: column-reverse; */
            /* 是否换行 */
            flex-wrap: wrap;
            /* 简写换行，换列 */
            /* flex-flow:row wrap; */
        }
        #a div{
            /* flex: 1; */
            width: 200px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="a">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

flex 属性设置含有计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            display: flex;
            width: 400px;
            height: 500px;
            background-color: darkgray;
        }
        #a div{
            width: 120px;
            height: 50px;
            border: 1px solid #000;
            background-color: aquamarine;
            /* 子对象的宽度，width会失效 */
            /* flex-basis: 50px; */
            /* 相对父级 */
            /* flex-basis: 10px;  */
        }
        /* 
        120 - 10 - 50 = 60
        60 / (1 + 1) = 30
        左： 10 + 30
        右： 50 + 30
        */
        #a div:nth-child(1){
            flex-basis: 10px;
            flex-grow: 1;
            background-color: bisque;
        }
        #a div:nth-child(2){
            flex-basis: 50px;
            flex-grow: 1;
            /* 是否允许缩小，处理超出的部分，如果子集超出了盒子，需要将子集缩小。 */
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div id="a">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

rem尺寸的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var c=()=>{
            // n 表示初始化时，字体大小
            // 20 表示初始化时的字体大小，
            // 768 主流屏幕的大小
            let w = document.documentElement.clientWidth
            let n = (20*(w/768)>40?40+'px':((20*(w/768))+ 'px'))
            document.documentElement.style.fontSize = n
        }
        window.addEventListener('load',c)
        window.addEventListener('resize',c)
    </script>
    <style>
        html{
            /* 根字体 */
            /* font-size: 20px; */
        }
        div{
            font-size: 1rem;
        }
    </style>

</head>
<body>
    <div>123</div>
</body>
</html>

页面自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var redirect = () => {
            // 获取设备信息
            let userAgent = navigator.userAgent.toLocaleLowerCase()
            // 正则表达式，判断设备类型
            console.log(userAgent)
            let device = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/
            if(device.test(userAgent)){
                // 跳转到移动页面端
                window.location.href = './html/pad.html'
            }else{
                // 跳转pc端页面
                window.location.href = './html/pc.html'
            }
        }
        redirect()
    </script>
</head>
<body>
    
</body>
</html>

响应式布局案例代码

html代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalale="0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/small.css" media="(max-device-width:800px)">
    <link rel="stylesheet" href="./css/big.css" media="(min-device-width: 801px)">
</head>
<body>
    <!-- 一套方案使用所有设备 -->
    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
                <li>分类5</li>
                <li>分类6</li>
            </div>
            <div>
                <li>图片1</li>
                <li>图片2</li>
                <li>图片3</li>
                <li>图片4</li>
                <li>图片5</li>
                <li>图片6</li>
                <li>图片7</li>
                <li>图片8</li>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码部分

big.css

*{
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}
#layout{
    display: flex;
    flex-direction: column;
    width: 80%;
    /* 居中 */
    margin: 0 auto;
}
#top{
    width: 100%;
    margin: 0 auto;
    background-color: yellow;
    /* 因为是轴向的，所以相当于设定了高度， 与height一样*/
    flex: 0 0 50px;
    /* height: 50px; */
}
#main{
    flex: 0 0 100%; 
    display: flex;
    /* 横向 */
    flex-direction: row;
}
#main div:nth-child(1){
    flex: 0 0 30%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#main div:first-child li{
    flex: 0 0 100%;
    height: 40px;
    list-style: 40px;
    text-align: center;
    border-bottom: 1px solid #dedede;
}

#main div:nth-child(2){
    flex: 0 0 70%;
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    border-right: 1px solid #000;
}
#main div:nth-child(2) li{
    flex: 0 0 15%;
    height: 120px;
    list-style: 40px;
    text-align: center;
    border: 1px solid #000;
    background-color: yellow;
    margin-top: 10px;
}
瞎玩瞎写瞎学的橘子君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML WEB网页前端大屏展示页面源代码
04-09
HTML WEB前端大屏页面源代码 大数据可视化WEB页面源代码
常用的前端大屏 适配方案
ZXH0122的博客
01-11 9480
前端大屏常用的几种 适配方案
前端大屏页面布局经验
大家好，我是 ed.
10-12 5712
前端大屏页面布局经验 额··· 其实谈不上经验，只能说是开发过程中值得记录一下的东西，不一定是对的。 分辨率 首先一点，大屏对分辨率和显示器是有要求的，因为他不像一般的页面，出个纵向的滚动条啥的无所谓，不是特殊情况下，大屏是不能出现滚动条的，所以其实不是随便一台电脑，随便一个分别率都可以使用大屏的，目前一般的分别率是 19201080100%的，但是具体得根据设计师设计图决定，还有，大屏是一般是全屏效果，就是F11电脑全屏，不加上浏览器上不标签栏、地址栏和书签栏的区域。 Echarts 再一个，大屏开
简单的投屏、数据大屏前端代码
sunon_的博客
11-18 2723
大厅投屏显示表格数据，无缝滚动，数据30分钟刷新一次(自己设置，用定时器刷新ajax) 页面样式： 效果展示：http://www.zjhuiwan.cn/blogImg/upload/ueditorVideo/20201118/160568355027930009717.mp4 页面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv
大屏前端代码（适应全屏幕）.rar
06-30
此为常用的自适应全屏HTML代码，里面包含CSS,JS，纯静态页面，高和宽均能自适应，下载后可直接套用。
前端工程师学习笔记 超级详细
10-31
前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 Mobx学习笔记 HTML+CSS+JS基础笔记 Git学习笔记 ES6及后续...
云的学习笔记系统代码 java云的学习笔记系统代码
最新发布
04-16
云的学习笔记系统代码 java云的学习笔记系统代码 基于SSM的云的学习笔记系统代码 1、云的学习笔记系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SSM ④ 架构:B/S、MVC ⑤ ...
前端大屏适配方案
haosicx的博客
04-24 3556
在每个路由主文件使用mixin混入drawMixin.js( 代码在下面 ) 前提 每个主文件的最外层 需要写id和ref drawMixin.js // 屏幕适配 mixin 函数 // * 默认缩放值 const scale = { width: '1', height: '1', } // * 设计稿尺寸（px） const baseWidth = 1920 const baseHeight = 1080 // * 需保持的比例（默认1.77778） const baseProp
大屏布局css,前端大屏项目的屏幕适配方案
weixin_32073537的博客
08-03 3201
最近在写大屏项目, 技术栈是echarts+vue, 在屏幕适配调研了很久, 网上有多种方案, 但都有自己的局限性,比如css媒体查询代码量巨大,且变化过程不平滑, vw适合定宽的不方便缩放的组件. 并不适合等比例缩放所有组件, 最后,我发现等比例缩放所有组件的话更适合用css变量来设置scale属性思路:1.初始化的时候获得大屏幕的比例2.把这个比例设置给css的scale变量3.监听浏览器的窗...
Vue监听屏幕宽度实现响应式
HeyinB的博客
09-10 3765
今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页，这就意味着要做响应式，也就是要监听网页的宽度。 用Vue-cli搭建好项目后 在app.vue中写一个方法来监听屏幕宽度 setMobile(){ addEventListener('resize',()=>{ //写一个监听要执行的函数 }) } 然后使用 document.documentE...
PC端 VUE 官网项目 前端开发 响应式布局（宽+高 等比例缩放）
weixin_55846296的博客
08-01 4929
各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！
响应式布局一个网页在不同设备显示不同效果）meta:vp
weixin_47295886的博客
07-22 633
媒体查询（响应式布局其中的一种方式）根据不同的显示设备来显示不同的样式设定 meta
【前端】页面适配？移动端适配屏幕的各种解决方案！
Tyler的博客
12-15 8421
移动端时代，我们该如何做适配呢？H5页面移动端适配屏幕的各种解决方案
web前端：企业官网响应式bootstrap一套代码跑三端，首页基本功能
cevent的博客
01-21 963
1.项目需求 编码工具 H-Builder less预处理css工具 Koala考拉 响应式框架 bootstrap3.0 javascript jQuery1.10及以上 需求js bootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js 轮播图尺寸推荐 1920px*1200px 自建脚本 cevent.less cevent.js 2.效果图 2.1PC端 2.2手机、pad端 2.3小功能 3
怎样能在大小不同的屏幕上显示同样的网页（自适应网页设计）？
热门推荐
mz_start2016的博客
03-16 2万+
怎样能在大小不同的屏幕上显示同样的网页（自适应网页设计）？ 2014/5/4 12:26:57 随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽
【web】强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配
小马哥93的博客
12-28 1万+
强大的屏幕适配布局rem响应式 实现一套代码多端适配 实现强大的屏幕适配布局 流式的布局、固定的宽度，还有响应式来做，但是这些方案都不是最佳的解决方法。->->rem rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是
前端控制屏幕双屏显示 pos副屏 副屏方案
createWrite的博客
07-01 2051
同一个主机连接双屏幕，在一个屏幕上打开网页，然后通过某一个事件，能够弹出一个窗口到另一个屏幕上
html5+css3响应式布局应该考虑到的屏幕的尺寸
qq_38922435的博客
05-28 7697
超小屏幕：（手机，小于768px）。小屏幕：（平板，大于等于768px）。中等屏幕：（桌面显示器，大于等于992px）。大屏幕：（大桌面显示器，大于等于1200px）。...
Html5----响应式（自适应）网页设计（自动适应屏幕大小）
qq_44740978的博客
08-16 5434
1、在网页代码的头部，加入一行viewport元标签 在网页的中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释： 属性 描述 width=device-width width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度 initial-scale=1.0 initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100% minimum-scale=1.0 表示最小的缩放比例
整理一套python学习笔记，带示列代码
04-07
好的，我可以为您整理一套Python学习笔记，并提供示例代码。您可以先从基础语法开始学习，如变量、数据类型、运算符、流程控制语句等，然后再学习函数、模块、异常处理、面向对象编程等高级特性。以下是一个简单的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值