响应式布局的原理

页面源码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>responsive</title>

    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">

    <style type="text/css">

        .content > div{

            height: 100px;

            line-height: 100px;

            text-align: center;

            color: #333;

            background: #cccccc;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <!-- 网页内容在展示的时候，如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整

    bootstrap就出现了响应式布局，响应式布局就是解决这种问题产生的

    利用栅格系统适应在不同的分辨率下预设占据的列

    栅格系统一共12列，如下设置

    1.在浏览器的分辨率>=1200px时，则每个div块占据3列，即每行显示4个div块

    2.在浏览器的分辨率>=992px && <= =1200px时，则每个div块占据3列，即每行显示4个div块

    3.在浏览器的分辨率>=720px时，则每个div块占据4列，即每行显示3个div块

    4.在浏览器的分辨率>=576px时，则每个div块占据6列，即每行显示2个div块

    5.在浏览器的分辨率<576px时，则每个div块占据12列，即每行显示1个div块

    -->

    <div class="container">

        <div class="row">

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>

        </div>

    </div>

</body>

</html>

1.网页内容在展示的时候，如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整，体验非常差

2.在浏览器的分辨率>=1200px时，则每个div块占据3列，即每行显示4个div块

在浏览器的分辨率>=992px && <= =1200px时，则每个div块占据3列，即每行显示4个div块

3.在浏览器的分辨率>=720px时，则每个div块占据4列，即每行显示3个div块

4.在浏览器的分辨率>=576px时，则每个div块占据6列，即每行显示2个div块

5.在浏览器的分辨率<576px时，则每个div块占据12列，即每行显示1个div块

bootstrap4简单使用和入门03-响应式布局的更多相关文章

  1. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  2. Bootstrap4响应式布局之栅格系统

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...

  3. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  4. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  5. 一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）

    前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...

  6. 响应式布局（Responsive layout，RL）的简单Demo

          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...

  7. JGUI源码：响应式布局简单实现(13)

    首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...

  8. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）

    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...

  9. CSS3之响应式布局

    在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...

随机推荐

  1. 053、overlay是如何隔离的？（2019-03-20周三）

    参考https://www.cnblogs.com/CloudMan6/p/7341487.html   不同的overlay网络是相互隔离的,我们创建第二个overlay网络 ov_net2 并运行 ...

  2. linux_添加图标

    sudo gedit /usr/share/applications/Pycharm.desktop [Desktop Entry] Type=Application Name=Pycharm Gen ...

  3. Django聚合与分组查询中value与annotate的顺序问题

    在学习Django聚合与分组查询中,发现value与annotate的顺序不同时,查询结果大相径庭,经过一下午的研究,终于弄明白了,现在分享给大家,先上结论: 结论 value在annotate前面时 ...

  4. Hadoop 博文整理

    参考文章##搭建 使用yum安装CDH Hadoop集群   http://blog.javachen.com/2013/04/06/install-cloudera-cdh-by-yum/   Ha ...

  5. 一、VS2017 的创建程序

    1.1 创建第一个子程序 1.1.1 创建项目 打开 VS2017,选择菜单栏 [文件]->[新建]->[项目]: 点击[确定]后,弹出如下界面: 点击[下一步]: 选择 空项目, 然后点 ...

  6. 哈希函数（hash函数）

    hash,—般译为“散列”,也可以直接音译为“哈希”,是对输入的任意长度(又称预映射),通过哈希算法,转换成固定长度的哈希值输出.这种转换是一种压缩映射,即,哈希值空间通常比输入空间小得多,不同的输入 ...

  7. Element Tabs 组件中使用 ve-histogram组件渲染不出来（已解决）

    Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...

  8. F - Auxiliary Set HDU - 5927 （dfs判断lca）

    题目链接: F - Auxiliary Set HDU - 5927 学习网址:https://blog.csdn.net/yiqzq/article/details/81952369题目大意一棵节点 ...

  9. mysql案例~关于linux服务器本身的优化问题

    简介:mysql服务优化分为 1服务器本身的优化 2mysql本身的性能优化 今天咱们来讨论下服务器本身的优化性能 一 参数的优化简介 1 文件系统的选择 Linux 常用文件系统: ext3, ex ...

  10. （ScrollViewer或者有滚动条的控件）嵌套一个（ScrollViewer或者有滚动条的控件）禁用里面的滚动条

    转自:http://blog.csdn.net/haylhf/article/details/8351203 后有改动 在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里 ...