一文看懂响应式布局_欧阳呀的博客-程序员秘密

技术标签: css布局  响应式设计  响应式布局  css响应式布局  

响应式布局概念

响应式布局(Responsive design),意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局一 : Meta 标签

兼容性:IE9以及以上,其它浏览器没问题

主要通过设置以下几个值实现响应式
device-width 设备的宽度,根据当前设备的宽度设置宽度。
initial-scale 初始缩放
maximum-scale 最大缩放 即允许的最大缩放程度
minimum-scale 最小缩放 即允许的最小缩放程度
user-scalable 用户是否能改变页面缩放程度,如果设置为no,最大与最小缩放将被忽略


<meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0, 
                                   maximum-scale=1.0, 
                                   minimum-scale=1.0, 
                                   user-scalable=no"
                                   >

响应式布局二 : media 媒体查询

兼容性:IE9以及以上,其它浏览器没问题

 /* 当文档宽度小于980的时候  小于或等于指定的宽度时,样式生效 */
        @media screen and (max-width: 980px) {
    
            .div1 {
     
                width:500px;
             }
             /* 做一些其它的样式 */
        }
        /* 大于或等于指定宽度时,样式生效。 */
        @media screen and (min-width: 980px) {
    
            .div1 {
     
                width:100px;
             }
        }
        /* 上面是单个,现在试试多个 屏幕在600px~900px之间时*/
        @media screen and (min-width:1000px) and (max-width:1200px){
    
            .div1{
    
                background:palegreen;
            }
        }
        /* not关键字 样式代码将被使用在除开打印与设备宽度小于980px下所有设备中*/
        @media not print and (max-width: 680px){
    
             .div3{
    
                background: chocolate;
            } 
        }

上面这些写在一个文件有些不好维护,那我们可以改变link标签,根据屏幕分辨率引入不同的css

<link rel="stylesheet" media="screen and (max-device-width:480px)"  href="./css/css1.css">
    <link rel="stylesheet" media="screen and (min-device-width:480px)"  href="./css/css2.css">

在屏幕分辨率小于等于480px的时候,使用css1,当屏幕分辨率大于480px,使用css2,分开会更好维护。

响应式布局三 : 百分比布局

根据屏幕大小自动适应,兼容性强大

  header{
    
            width: 100%;
            /* 百分比即是响应式 */
            height: 40px;
            background: green;
            color: white;
        }
        .div1{
    
            width: 50%;
            height: 200px;
            background: pink;
            color: white;
        }

需要注意的是图片处理

简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。

img {
     width: auto; max-width: 100%; }

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能,根据不同的分辨率使用尺寸不同的图片

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

css控制

@media (min-device-width:600px) {
    
    img[data-src-600px] {
    
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    
    img[data-src-800px] {
    
        content: attr(data-src-800px, url);
    }
}

附上百分比做的响应式一个案例

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .main img {
    
            width: 100%;
        }

        h1 {
    
            font-size: 1.625em;
        }

        h2 {
    
            font-size: 1.375em;
        }

        .header {
    
            padding: 1.%;
            background-color: #f1f1f1;
            border: 1px solid #e9e9e9;
        }

        .menuitem {
    
            margin: 4%;
            margin-left: 0;
            margin-top: 0;
            padding: 4%;
            border-bottom: 1px solid #e9e9e9;
            cursor: pointer;
        }

        .main {
    
            padding: 2%;
        }

        .right {
    
            padding: 4%;
            background-color: #CDF0F6;
        }

        .footer {
    
            padding: 1%;
            text-align: center;
            background-color: #f1f1f1;
            border: 1px solid #e9e9e9;
            font-size: 0.625em;
        }

        .gridcontainer {
    
            width: 100%;
        }

        .gridwrapper {
    
            overflow: hidden;
        }

        .gridbox {
    
            margin-bottom: 2%;
            margin-right: 2%;
            float: left;
        }

        .gridheader {
    
            width: 100%;
        }

        .gridmenu {
    
            width: 23.5%;
        }

        .gridmain {
    
            width: 49%;
        }

        .gridright {
    
            width: 23%;
            margin-right: 0;
        }

        .gridfooter {
    
            width: 100%;
            margin-bottom: 0;
        }

        @media only screen and (max-width: 500px) {
    
            .gridmenu {
    
                width: 100%;
            }

            .menuitem {
    
                margin: 1%;
                padding: 1%;
            }

            .gridmain {
    
                width: 100%;
            }

            .main {
    
                padding: 1%;
            }

            .gridright {
    
                width: 100%;
            }

            .right {
    
                padding: 1%;
            }

            .gridbox {
    
                margin-right: 0;
                float: left;
            }
        }
    </style>
</head>

<body>
    <div class="gridcontainer">
        <div class="gridwrapper">
            <div class="gridbox gridheader">
                <div class="header">
                    <h1>响应式案例</h1>
                </div>
            </div>
            <div class="gridbox gridmenu">
                <div class="menuitem">列表一</div>
                <div class="menuitem">列表二</div>
                <div class="menuitem">列表三</div>
                <div class="menuitem">列表四</div>
            </div>
            <div class="gridbox gridmain">
                <div class="main">
                    <h1>Wilson</h1>
                    <p>我觉得这里最帅的就是博文作者了,我觉得这里最帅的就是博文作者了
                       我觉得这里最帅的就是博文作者了我觉得这里最帅的就是博文作者了
                    </p>
                    <img src="./img/gf.jpg" alt="girlfriend" width="" height="">

                </div>
            </div>
            <d iv class="gridbox gridright">
                <div class="right">
                    <h2>帅的突破天际</h2>
                    <p>这里是一些文字文字文字66666</p>
                    <h2>博文作者是真的帅</h2>
                    <p>在坐的各位都帅9999999999999</p>
                    <h2>随便放</h2>
                    <p>帅就完事了</p>
                </div>
            </div>
            <div class="gridbox gridfooter">
                <div class="footer">
                    <p>今天学到东西了,很开心很开心。今天学到东西了,很开心很开心今天学到东西了,
                        很开心很开心今天学到东西了,很开心很开心</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

响应式布局四 : flex

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
兼容性:IE9+
从一个面试题说起:如何让一个盒子在body里上下左右居中
最简单的方式莫过于flex,通常使用margin的方式太low

body{
    
 	/* 重点在这 */
	display:flex;
}
body,html{
    
	height:100%;
}
div{
    
	height:300px;
	width:600px;
	/* 重点在这 */
	margin:auto;
}
//无论你屏幕大小如何调,都会保持居中状态

其它相关属性

 			/* 换行 wrap-reverse:换行,第一行在下方。nowrap(默认):不换行。wrap:换行,第一行在上方。*/
           flex-wrap:wrap;
            /*主轴方向 排列方向 。row | row-reverse | column | column-reverse;*/
           flex-direction: row;
			/* 主轴元素对齐方式 flex-start | flex-end | center | space-between | space-around*/
           justify-content: center;

           /* 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 */
           align-content:flex-start; 
            /* flex-start | flex-end | center | space-between | space-around | stretch */

order为排序先后,数字越小排前面
flex-grow为比例大小,根据屏幕大小自动分配

 <div class="con">
        <div style="order:5;flex-grow:3;background: orangered;">我是div1</div>
        <div style="order:3;flex-grow:3;background: yellow;">我是div3</div>
        <div style="order:2;flex-grow:4;">我是div4</div>
    </div>

在这里插入图片描述
如有错误,欢迎指正
本篇博客为原创,转载请注明出处

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35942348/article/details/102931127

智能推荐

ORACLE关于索引是否需要定期重建争论的整理_weixin_34258838的博客-程序员秘密

     ORACLE数据库中的索引到底要不要定期重建呢? 如果不需要定期重建,那么理由是什么? 如果需要定期重建,那么理由又是什么?另外,如果需要定期重建,那么满足那些条件的索引才需要重建呢?关于这个问题,网上也有很多争论,也一直让我有点困惑,因为总有点不得庐山真面目的感觉,直到上周看到了一些资料,遂整理于此,方便以后翻阅: 首先来看看网上关于索引需要重建的准则或标准:   一:分析...

雅虎日本如何用 Pulsar 构建日均千亿的消息平台_过往记忆的博客-程序员秘密

雅虎日本是一家雅虎和软银合资的日本互联网公司,是日本最受欢迎的门户网站之一。雅虎日本的互联网服务在日本市场占主导地位。下图从三个维度显示了雅虎日本的经营规模。第一个是服务数量,雅虎日本提供上百种互联网服务;第二个是服务器数量,雅虎日本使用超过 150,000 台服务器(大多为裸机服务器)全天候支持这上百种互联网服务的正常运作;第三个是每月总页面浏览量,2017 年的数据显示,雅虎日本每月浏览量超过...

多项式事件模型(multinomial event model)_花折泪的博客-程序员秘密

我们之前讨论了基于朴素贝叶斯的文本分类,也被称作多变量伯努利事件模型(multi-variate Bernoulli event model),我们首先假设,邮件是随机发送过来的(垃圾与非垃圾),所以有先验概率p(y),然后我们又认为,邮件里每一个单词是相互独立的,p(xi=1|y) =φi|y,一条讯息的概率是1这里,我们介绍一种新的模型,被称为多项式事件模型(multinomial e

在MFC中显示opencv图像_mfc+opencv+vs显示图像_IT修道者的博客-程序员秘密

在MFC中,不能将突破从IplIamge或cv::Mat直接显示在图片控件中。需要先把IplImage或 cv::Mat先转换为CvvImage。1.显示IplImage中图像需要先把IplImage图像转换为CvvImage类型IplImage* test_img = cvLoadImage("1.jpg",1);CDC* pDC = GetDlgItem(IDC_TEST_IMG)->GetD

OllyDBG教程!_yxyhack的博客-程序员秘密

一、OllyDBG 的安装与配置OllyDBG 1.10 版的发布版本是个 ZIP 压缩包,只要解压到一个目录下,运行 OllyDBG.exe 就可以了。汉化版的发布版本是个 RAR 压缩包,同样只需解压到一个目录下运行 OllyDBG.exe 即可:screen.width*0.6) {this.width=screen.width*0.6;this.alt=此图已经缩小,点击察看原图。;}

如何在html中制作播放按钮,HTML5+CSS3网页实例:制作网页播放器按钮_SeaTable的博客-程序员秘密

最近开始学习html5+css3,练习下css3,绘制了几个播放器的按钮,有什么更好的建议,望大家指出……body{background:#000;}header{font-family:"MicroSoft YaHei";font-size:30px;color:#990000;}.circle{width:120px;height:120px;-webkit-border-radius:60p...

随便推点

ubuntu20安装stunnel_ubuntu stunnel_zebra1991的博客-程序员秘密

安装:sudo apt-get install stunnelstunnel配置文件路径为/etc/stunnel/stunnel.conf开启:sudo stunnel关闭:(1)找到pidsudo ps -ef|grep stunnel(2)杀死进程kill -9 141482

linux X window system_weixin_30404405的博客-程序员秘密

为啥图形窗口接口要称为 X 呢?因为就英文字母来看 X 是在W(indow) 后面,因此,人们就戏称这一版的窗口接口为 X ,有下一版新窗口之意X系统由3个相关的部分组合起来的。   服务端(Server)  Server是控制显示器和输入设备(键盘和鼠标)等硬件的软件。它负责检测具体那个设备有什么动作,如键盘按下、鼠标滑动,但它不能将这些动作转化为绘图数据。它还负...

mongo服务器管理_uevol14的博客-程序员秘密

如果未提供服务器配置文件,mongodb使用默认的数据库路径/data/db启动,并使用默认端口27017(mongodb)和28017(管理界面)连接到所有的网络IP重新配置服务器mongoDB提供3中方式用于配置服务结合mongod守护进程,使用命令行选项。使用setParameter修改设置加载一个配置文件 一般打包的安装包都是用加载一个配置文件,Unix/Linux该配置文件通常位于

vue3.0响应式源码实践,vue3.0初体验_王一诺Eno的博客-程序员秘密

vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpgvue-next(vue3.0预体验)1. 使用:2.vue-next的目录结构3. reactive内部实现作者上篇文章已经对ue2.0响应式的一个原理做了比较详细的介绍,但2019年10月5日,尤小右公开了 Vue 3.0 的源代码。源码地址:vue-next,至于vue预版本的优势在github都接下来就让我给各位看官大佬介绍一个这个3.0前的一些内容吧;vue-next(vue3.0预体验)由于vue-next并

(转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传_weixin_30307267的博客-程序员秘密

Anthem.NET(我的介绍和比较,还有一篇)刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现。本文将简要介绍一下该功能的使用方法。Anthem.NET的下载与安装Anthem.NET可以在此下载:http://sourceforge.net/project/showfiles.php?group_id=151897&amp;package_id...

matlab如何快速的学,MATLAB - 快速指南_张崇子的博客-程序员秘密

MATLAB - 快速指南MATLAB - OverviewMATLAB(矩阵实验室)是第四代高级编程语言和交互式环境,用于数值计算,可视化和编程。MATLAB由MathWorks开发。它允许矩阵操作; 绘制功能和数据; 算法的实现; 创建用户界面; 与用其他语言编写的程序连接,包括C,C ++,Java和FORTRAN; 分析数据; 开发算法; 并创建模型和应用程序。它具有许多内置...

推荐文章

热门文章

相关标签