响应式布局原理

雨点打透心脏的1/2处 2023-01-10 13:27 212阅读 0赞

响应式开发里面，首先需要一个布局容器

<body>
        
        <div class="container"></div>
    </body>

使用媒体查询 @media screen and (max-width: 767px)

<style>
        .container { 
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */
        
        @media screen and (max-width: 767px) { 
            .container { 
                width: 100%;
            }
        }
        /* 2. 小屏幕下 大于等于768 布局容器改为 750px */
        
        @media screen and (min-width: 768px) { 
            .container { 
                width: 750px;
            }
        }
        /* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */
        
        @media screen and (min-width: 992px) { 
            .container { 
                width: 970px;
            }
        }
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        
        @media screen and (min-width: 1200px) { 
            .container { 
                width: 1170px;
            }
        }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关响应式布局

一、响应式开发 1.1、概述就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2、响应式布局容器 1

落日映苍穹つ/ 2023年10月14日 11:07/ 0 赞/ 57 阅读

相关响应式布局

（给前端大全加星标，提升前端技能） > 作者：浪里行舟 > > https://github.com/ljianshu/Blog/issues/38 前言

柔光的暖阳◎/ 2023年08月17日 16:34/ 0 赞/ 154 阅读

相关响应式布局原理

响应式开发里面，首先需要一个布局容器 <body>  <div class="c

雨点打透心脏的1/2处/ 2023年01月10日 13:27/ 0 赞/ 213 阅读

相关响应式布局

目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1

快来打我*/ 2022年10月18日 01:38/ 0 赞/ 342 阅读

相关响应式布局

<table style="height:40px; border-color:a9a9a9; border-width:0px; background-color:a9a9a

àì夳堔傛蜴生んèń/ 2022年07月11日 08:14/ 0 赞/ 282 阅读

相关响应式布局

一、视口（viewport）移动前端的viewport就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小。手机端和PC端视口存在差异，电脑端视口等于其分辨率，手机端的

迈不过友情╰/ 2022年03月31日 10:54/ 0 赞/ 328 阅读

相关响应式布局

4.1 meta 标签最简单的处理方式是加上一个 meta 标签 <meta name="viewport" content="width=device-width,

左手的ㄟ右手/ 2022年03月09日 10:06/ 0 赞/ 344 阅读

相关响应式布局

响应式布局响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享

本是古典何须时尚/ 2022年01月29日 00:47/ 0 赞/ 354 阅读

相关响应式布局

简介什么是响应式布局? 同一个页面在不同屏幕尺寸下有不同的布局传统的开发方式是PC端开发一套,手机一套使用响应式布局只需要开发一套

以你之姓@/ 2022年01月20日 10:47/ 0 赞/ 399 阅读

相关响应式布局

一、什么是响应式布局？响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不

浅浅的花香味﹌/ 2021年12月22日 20:17/ 0 赞/ 383 阅读