响应式布局

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局相关的知识，希望对你有一定的参考价值。

一、如何实现响应式布局

  • css3-Media Query（最简单的方式）
  • 借助原生javascript（成本高，不推荐使用）
  • 第三方开源框架（可以很好的支持浏览器响应式布局的设计 如;bootstrap）

二、css3-Media Query简单案例

1、常见属性

  • device-width，device-height -----------------屏幕宽高
  • width，height                        ------------------渲染窗口宽高
  • orientation                             ------------------设备方向
  • resolution                              -------------------设备分辨率

2、基本的语法

  • 外联样式表语法
  • body{
    background-color: red;
}
    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="link.css" type="text/css" rel="stylesheet" media="screen and (max-width:480px)" />  
</head>
<body>
</body>
</html>

     

  • 内嵌样式语法
  • 技术分享 
    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="link.css" type="text/css" rel="stylesheet" media="screen and (max-width:480px)" />
    <style>
        @media screen and (min-width:480px) {
            body{
                background-color: #000055;
            }

        }
    </style>
</head>
<body>

</body>
</html>
    demo

     

三、响应式布局之bootstrap

     先将以下两个样式引入到HTML中

 

 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.user-scalable=no">
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">

　1、栅格系统

  • 注重应用规则
  • 熟练掌握栅格化布局的相关知识
  • bootsrap官网http:getbootstrap.com/css查看命名规则
  • 首先需要为栅格化布局定义一个外围容器 <div class="row"></div>技术分享

  2、bootstrap组件components

 


以上是关于响应式布局的主要内容，如果未能解决你的问题，请参考以下文章

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

H5响应式布局 响应式图片 响应式布局网站怎么写？

响应式布局

grid实现响应式布局

响应式布局

响应式布局