响应式布局

已于 2022-09-29 20:35:39 修改
阅读量269 收藏
点赞数 3
文章标签： css 前端
于 2022-09-21 20:37:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62697897/article/details/126909199
版权

目录

1.响应式布局viewport

2.百分比布局

3.媒体查询

4.em和rem的区别：

5.vw和vh：相对于可视窗口的大小

1.响应式布局viewport

（1）viewport: 初始化页面元素，防止页面被缩放，规范用户操作

（2）width=device-width：设置宽度为屏幕宽度

（3）maximum-scale=1.0：最大缩放比例为1.0

（4）minimum-scale=1.0：最小缩放比例为1.0

（5）user-scalable=no：禁止用户捏合操作

（6）initial-scale=1.0：初始化的缩放比例

代码：

<!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>帅哥鉴赏大赛</title>
</head>
<link rel="stylesheet" href="reset.css">
<style>
    /* 公共样式 */
    html{
        /* 62.5%也就是10px */
        font-size: 62.5%;
    }
    a,span{
        color: black;
        /* 2rem相当于20px */
        font-size: 2rem;
    }
    nav{
        width: 80%;
        height: 60px;
        background-color: #fff;
        position: fixed;
        top:0;
    }
    nav ul{
        width: 100%;
        height: 60px;
    }
    main  img{
        width: 100px;
        height: 240px;
    }
</style>
<link rel="stylesheet" href="pc.css" media="screen and (min-width:750px)">
<link rel="stylesheet" href="phone.css" media="screen and (max-width:750px)">
<body>
    <div class="wrap">
        <!-- 导航条部分 -->
        <nav>
            <ul class="pc">
                <li>
                    <a href="#">Cute  guy</a>
                </li>
                <li>
                    <a href="#">Many</a>
                    <a href="#">Excellent</a>
                    <a href="#">BOY</a>
                </li>
                <li>
                    <a href="#">BOYS</a> / <a href="#">One-nith</a>
                </li>
            </ul>
            <ul class="phone">
                <li><a href="#">Berger & Fohr</a></li>
                <li><a href="#"></a></li>
            </ul>
        </nav>

        <!-- 图文组合 -->
        <main>
            <div class="item">
                <img src="img/01.jfif" alt="">
                <p><a href="">王俊凯</a></p>
            </div>
            <div class="item">
                <img src="img/02.jfif" alt="">
                <p><a href="">王源</a></p>
            </div>
            <div class="item">
                <img src="img/03.jfif" alt="">
                <p><a href="">易烊千玺</a></p>
            </div>
            <div class="item">
                <img src="img/04.jpg" alt="">
                <p><a href="">TFBOYS</a></p>
            </div>
            <div class="item">
                <img src="img/05.jfif" alt="">
                <p><a href="">TFBOYS</a></p>
            </div>
            <div class="item">
                <img src="img/07.jpg" alt="">
                <p><a href="">TFBOYS</a></p> 
            </div>
            <div class="item">
                <img src="img/06.jfif" alt="">
                <p><a href="">张艺兴</a></p>
            </div>
            <div class="item">
                <img src="img/08.jfif" alt="">
                <p><a href="">鹿晗</a></p>
            </div>
            <div class="item">
                <img src="img/09.jfif" alt="">
                <p><a href="">黄子韬</a></p> 
            </div>
        </main>
    </div>
    <!-- 联系方式 -->
    <footer>
        <p><a href="#">TFBOYS</a></p>
        <p><a href="#">2013-08-06</a></p>
        <p><span>(10year) 2023-08-06</span></p> 
    </footer>
</body>
</html>

 新建css文件夹，在里面创建一个reset.css文件

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

 新建css文件夹，在里面创建一个pc.css文件 （电脑端）

.wrap{
    width: 80%;
    margin: 0 auto;
    padding-top: 80px;
    /* height: 200px; */
    /* background-color: aqua; */
}

.phone{
    display: none;
}

.pc li{
    line-height: 60px;
    font-size: 2rem;
    overflow: hidden;
    /* background-color: blue; */
}

.pc li:nth-of-type(1){
    width: 30%;
    height: 100%;
    float: left;
    text-align: left;
}
.pc li:nth-of-type(2){
    width: 40%;
    height: 100%;
    float: left;
    text-align: center;
}
.pc li:nth-of-type(2) a{
    margin: 0 5px;
}
.pc li:nth-of-type(3){
    width: 30%;
    height: 100%;
    float: left;
    text-align: right;
}

main{
    overflow: hidden;
    /* width: 100%;
    padding-bottom: 80px; */
    
}
main .item{
    width: 32%;
    float: left;
    margin-right: 2%;
    /* background-color: aquamarine; */
    height: 280px;
}

main .item:nth-of-type(3n){
    margin-right: 0;
    
}

main .item img{
    display: block;
    width: 100%;
    /* height: 20px; */
}

main .item p{
    height: 3rem;
    line-height: 3rem;
}

footer{
    /* margin-left: 80px; */
    height: 3rem;
    text-align: center;
    /* background-color: blueviolet; */
}
footer p{
    height: 100%;
    /* text-align: center; */
    line-height: 3rem;
    float: left;
    width: 30%;
}
footer p:nth-of-type(2){
    width: 40%;
    text-align: center;
}
footer p:nth-of-type(3){
    text-align: right;
}

 新建css文件夹，在里面创建一个phone.css文件  （手机端）

.wrap{
    width: 92%;
    margin: 0 auto;
    padding-top: 80px;
    /* background-color: aqua; */
}
nav{
    width: 92%;
}

.pc{
    display: none;
}

.phone{
    width: 100%;
    height: 60px;
    /* background-color: blueviolet; */
}

.phone li{
    width: 50%;
    height: 60px;
    line-height: 60px;
    font-size: 2rem;
    float: left;
}
.phone li:nth-of-type(2) a {
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(./img/caidan.png);
    background-size: 100% 100%;
    margin-top: 20px;
}

main{
    overflow: hidden;
}

main .item{
    width: 100%;
}
main .item img{
    display: block;
    width: 100%;
}

main .item p{
    height: 3rem;
    line-height: 3rem;
}
footer p{
    height: 3rem;
    line-height: 3rem;
}

运行结果：

pc端

 

phone端

 

2.百分比布局

没有定位的情况：

（1）宽高百分比相对于父元素的宽高

（2）margin和padding的百分比相对于父元素的宽度

（3）定位的百分比相对于它的参照物

定位情况：

（1）宽高设置百分比相对于定位父元素的宽高

（2）定位的left和right相对于定位父元素的宽度，top和bottom相对于定位父元素的高度

代码：

<!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>百分比布局</title>
    <style>
        /* 没有定位的情况
             1.宽高设置百分比相对于父元素的宽高
             2.margin和padding相对于父元素的宽度

            定位情况
             1.宽高设置百分比相对于定位父元素地宽高
             2.定位的left和right相对于定位父元素的宽度  top和bottom相对于定位父元素的高度

             vw(宽度撑满)和vh(高度撑满)相对于浏览器可视窗口  和父元素没有关系
        */
        *{
            margin: 0;
            padding: 0;
        }
        .grandfather{
            width: 800px;
            height: 900px;
            background-color: black;
            position: relative;
        }
        .father{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        .father div{
            width: 10%;
            height: 10%;
            background-color: blueviolet;
            position: absolute;
            left: 10%;
            top: 10%;
        }
        /* html,body{
            height: 100%;
        } */
        .container{
            width: 100vw;
            height: 50px;
            background-color: blue;
        }
        .container p{
            width: 10%;
            height: 30px;
            background-color: brown;
        }
        
       
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div></div>
        </div>
    </div>
    <div class="container">
        <p></p>
    </div>
</body>
</html>

运行结果：

3.媒体查询

（1）在不同的屏幕大小下定制样式

（2）@media screen and(min-width：宽度){样式}：大于某个值时的样式

（3）@media screen and(max-width：宽度){样式}：小于某个值的样式

（4）@media screen and(min-width：宽度)  and  (max-width：宽度){样式}：

         在最大值和最小值内的样式

（5）@media not screen and(min-width：宽度)   and   (max-width：宽度){样式}：

         除某个范围内样式

（6）可以使用link引入外部文件，link的media属性中写媒体查询：

         <link rel="stylesheet"   media="screen   and   (max-width：800px)"href="er.css">

（7）补充：

         <1>浏览器大小使用min-width和max-width判断

         <2>屏幕大小使用min-device-width和max-device-width判断

代码：

<!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>媒体查询练习1</title>
    <style>
        div{
            background-color: #dcdcdc;
            padding-top: 5px;
        }
        
        @media screen and (min-width:1200px) {
            div{
                width: 700px;
                height: 680px;
            }
            p{
                width: 100px;
                height: 300px;
                display: inline-block;
                background-color: gold;
                margin-left: 10px;
                text-align: center;
                line-height: 300px;
            }
             p:nth-of-type(7){
                margin-top: 10px;
           }
        }
        
        @media screen and (min-width:780px) and (max-width:1200px) {
            div{
                width: 800px;
                height: 940px;
            }
            p{
                width: 175px;
                height: 278px;
                display: inline-block;
                background-color: green;
                margin-left: 10px;
                text-align: center;
                line-height: 278px;
            }
            p:nth-of-type(5),p:nth-of-type(9){
                margin-top: 10px;
           }
            
        }
            
        
        @media screen and (max-width:780px) {
            div{
                width: 800px;
                height: 1300px;
            }
           p{
                width: 238px;
                height: 207px;
                display: inline-block;
                background-color: blue; 
                margin-left: 10px;
                text-align: center;
                line-height: 207px;
            }
            p:nth-of-type(4),p:nth-of-type(7),p:nth-of-type(10){
                margin-top: 10px;
            }
           
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
    </div>
</body>
</html>

运行结果：

 

4.em和rem的区别：

(1)em：相对于最近的父元素的font-size的大小

(2)rem：相对于html的字体大小

5.vw和vh：相对于可视窗口的大小

（1）vw单位可以根据窗口的宽度自动改变大小,“1vw”是窗口宽度的“1%”

（2）vh单位可以根据窗口的高度自动改变大小,“1vh”是窗口高度的“1%”

 注意：vw(宽度撑满)和vh(高度撑满)相对于浏览器可视窗口  和父元素没有关系

傻乎乎的小不点
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vw/vh和响应式布局（bootstrap）学习
sunako099的博客
11-13 585
vw/vh与rem对比：（1）rem（2）vw / vh。
实现响应式布局有几种方法
青春木鱼的博客
11-29 4374
响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。
vw适配完成Web网页制作+响应式网页
qq_60069693的博客
12-25 461
是需要调用指定的类名就能相对应的效果，还提供了轮播图，导航，警告，成功等常用样式的书写代码。（使用时复制修改即可）注：要制作网页：下载生产文件，要看底层：下载源码。
移动端适配（rem，vw）+响应式布局
最新发布
G24gg的博客
05-16 461
Less 是一种动态样式语言，它扩展了 CSS 的功能，使得编写 CSS 更加高效和易于维护。Less 通常被称为 CSS 预处理器，因为它用特殊的语法和功能扩展了 CSS，最终会被编译成普通的 CSS 代码，以便浏览器可以正确解析和应用。 以下是 Less 的一些主要特点： 三、Bootstrap前端框架(Foundation等) 一、官网下载 min体积小，压缩过下载别忘了bi-
【响应式布局】
小王的博客
09-26 1812
什么是响应式布局、响应式布局的5种实现方案
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
m0_52900946的博客
04-21 2791
    在前端开发过程中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem、和vw /vh,本文主要分析px在移动端布局中的不足，以及几种不同的自适应解决方案 一、px和视口     一般情况下，我们写网页时最常用来描述长宽的单位是像素（px）,在pc端，通常认为css中，1px表示的真实长度是固定的     其实并不是这样，px是与设备有关的，例如font-size为16px的时候，在pc端和移动端的大小是不一样的    所以，css中1px的真实长度是由什么决定的呢
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
响应式布局参考css文件
10-09
响应式布局参考css文件
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
12-13
1、前言 （1）vw/vh介绍 在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即为屏幕的1%，与之对应的是vh，把高分成一百份，1vh即为屏幕高的1%，一般我们常用的vw单位来完成响应式开发 （2）rem介绍 rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如你html设置的字体为20px，那么页面中的1rem就相当于20px，举个例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8
仿星巴克页面（响应式布局）
11-25
因为越来越多的智能移动设备（ ...响应式网络设计 （ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕
响应式布局小案例
01-07
响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上，如桌面电脑、平板电脑和手机，自适应地展示内容。本案例聚焦于HTML5中的响应式布局应用，通过实例帮助我们理解如何创建一个能够灵活适应各种屏幕...
自适应屏幕的CSS响应式布局设计技巧总结
09-24
响应式布局设计是一种现代网页设计方法，旨在创建能够适应不同设备屏幕尺寸的网站。随着移动设备的普及，这种设计方式成为解决多平台显示问题的关键。本文将深入探讨CSS响应式布局设计技巧，帮助开发者理解其核心...
基于layui框架响应式布局的一些使用详解
10-16
**基于layui框架响应式布局详解** layui是一款轻量级的前端UI框架，它提供了丰富的组件和优雅的样式，尤其在响应式布局方面表现突出。本文将深入探讨如何使用layui实现响应式布局，帮助开发者快速构建适应不同设备...
vw+rem布局实现移动端响应式_移动端网页布局方法以及原理解释
zhangyizuishuai的博客
03-16 464
如上图中的scale表示设备像素比@2表示设备像素比是2以此类推@3表示3 设备像素比简称dpr 物理像素：设计图ps测量的像素叫做物理像素 逻辑像素：移动端CSS设置的像素 设备像素比dpr=物理像素/逻辑像素 等式变形推出 ☞ 逻辑像素=物理像素/dpr 移动端要VW和rem结合使用 利用VW去控制分辨率变动自适应设计稿一般是给的375的设计稿,我们只需要用设计稿中的100px,用vw的形式设置到html的字体大小上去就行 因为这样我们设计稿量多少PX只要小数点往左移动两位就行了 100/3
html字体大小vw,如何使用CSS vw尺寸单位实现响应式字体
weixin_30336531的博客
06-08 546
HTML导入代码模板：Responsive fonts - auto-scaling root font-sizeThe root font size scales up and down proportionately, between defined values, dependent upon the viewport width.Easy-peasy, stretch & sque...
移动端布局之vw，em,rem的用法总结以及响应式布局原理
m0_55980258的博客
11-05 1318
移动端布局之vw，em,rem的用法总结 ** 这是一个！+tab键生成的简单的html结构，而移动端最重要的就是这句话 *** 一键生成页面，基本上都会有这段声明，快捷键生成meta:vp_tab键也能生成，这段标签上面的viewport是屏幕窗口的意思，width=device-width中的width指的是虚拟窗口的宽度，device-width指的是实际窗口的宽度。 1.什么是em? em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置即参照父容器的字号大小或浏览器默认字号大小。 假设
react 响应式布局
04-03
React响应式布局是一种在React应用中实现自适应和响应式设计的方法。它可以根据不同的屏幕尺寸和设备类型，动态地调整和重新排列组件，以提供更好的用户体验。 在React中，可以使用CSS媒体查询、Flexbox布局和Grid布局等技术来实现响应式布局。以下是一些常用的方法和技术： 1. CSS媒体查询：通过在CSS中使用@media规则，可以根据不同的屏幕尺寸应用不同的样式。例如，可以定义不同的CSS类来适应不同的屏幕宽度，并在组件中根据屏幕尺寸动态地切换类名。 2. Flexbox布局：Flexbox是一种弹性盒子布局模型，可以方便地实现自适应和响应式布局。通过设置容器的flex属性和子元素的flex属性，可以实现灵活的布局和自动调整。 3. Grid布局：Grid布局是一种二维网格布局模型，可以将页面划分为行和列，并通过设置网格项的属性来控制布局。Grid布局提供了更精确和灵活的控制，适用于复杂的响应式布局需求。 4. 响应式组件库：除了手动编写响应式布局代码外，还可以使用现有的响应式组件库，如Ant Design、Material-UI等。这些组件库提供了一系列预定义的响应式组件和布局，可以快速搭建响应式界面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值