响应式布局

1.什么是响应式布局

响应式布局，检测设备信息，决定网页布局方式，一个网页适配多种屏幕，在不同分辨率的终端上不同展示方式
主要通过媒体查询来实现

2.响应式布局的优缺点

优点：为不同尺寸的终端完美展示页面，提升用户体验
缺点：代码冗余，网页体积变大，影响性能
适合与企业官网，博客，新闻网站这些以浏览为主，没有过多交互的网站

3.媒体查询的作用

媒体查询式用来设置不同屏幕尺寸下的样式

4.媒体查询的使用方法

@media screen and (max-width: 768px){
body {
	background-color: green;
    }
}

5.媒体查询条件的书写顺序

如果同时满足两个条件，以写在后面的为主，所以判断最小值从小到大写，判读最大值从大到小写（bootstrap也是这么做的）

6.媒体查询引用样式文件的方法

<!-- 引用和not使用 -->
<!-- not表示条件取反 -->
<link rel="stylesheet" media='not screen and (min-width: 980px)' href="a.css">

7.min-width和min-device-width的区别

min-width指的是浏览器可视区域的宽度（浏览器窗口放大或缩小会影响它）
min-device-width指的是设备的宽度（是固定的）（浏览器窗口放大或缩小不会影响它）
如果想要移动端和pC端都有效果使用min-width

8.bootstrap框架介绍

bootstrap是HTML，CSS，Javascript框架，用于开发响应式布局，移动设备优先的web项目

9.bootstrap的特点

快速上手，适配所有的设备和项目
基于jQuery
less和sass预处理脚本（Bootstrap 的源码式基于less和sass预处理脚本开发的，所以我们可以订制less或sass文件，然后编译成最终需要使用的CSS文件）
一个框架，多种设备（媒体查询）
文档齐全

10.bootstrap的头部封装

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv.min.js"></script>
      <script src="./lib/respond/respond.js"></script>
    <![endif]-->
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./lib/jquery/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  </head>

11.bootstrap中的布局容器

.container (这个类用于固定宽度并支持响应式布局的容器。某个范围内宽度固定一个值小于一定值后宽度固定100%)
.container-fluid（用于 100% 宽度，占据全部视口（viewport）的容器。pc端视口就是浏览器窗口的大小）

12.栅格系统

栅格系统是用来设置当前子元素，在指定屏幕下，占据默认的12等分中的几等分

添加容器
在容器中添加行.row
在row中添加子元素，设置栅格

<body>
	<div class="container-fluid">
        <div class="row">
            <!-- xs: w<768
                 sm: 768<= w < 992
                 md: 992<= w < 1200
                 lg: 1200<= w
             -->
            <!-- col-xs-12 col-sm-6 col-md-4 col-lg-3 同时满足条件，后面的类会覆盖前面的类-->
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
        </div>   
    </div>
</body>

13.栅格系统的一些样式

col-xs-offset-2 （往右偏移两个栅格，后面的元素同样偏移，因为是通过margin实现的）
col-xs-push-2 (往右移动两个栅格，会覆盖后面的元素，因为是通过定位实现的)col-xs-pull-2 往左

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-xs-offset-2 col-xs-push-2">1</div>
            <div class="col-xs-1 ">2</div>
            <div class="col-xs-1">3</div>
            <div class="col-xs-1">4</div>
            <div class="col-xs-1">5</div>
            <div class="col-xs-1">6</div>
            <div class="col-xs-1">7</div>
            <div class="col-xs-1">8</div>
            <div class="col-xs-1">9</div>
            <div class="col-xs-1">10</div>
            <div class="col-xs-1">11</div>
            <div class="col-xs-1">12</div>
         </div> 
 
    </div>

hidden-xs(hidden-sm) (在指定宽度的屏幕下内容隐藏 display:none)

<div class="col-xs-1 hidden-xs">1</div>

14.less的环境

less依赖于node,安装node后下载less,

npm install -g less(下载后目录：C:\Users\18852034587\AppData\Roaming\npm\node_modules\less)
将less文件编译成css文件（lessc test.less test.css）

15.sublime下安装less文件即时编译插件

在sublime里安装好less（less语法高亮功能插件）和Less2Css（编译功能插件）这两个插件（Ctrl+Shift+p打开命令面板，输入install package并在下拉里选中install package）
node下安装npm install -g less和npm install -g less-plugin-clean-css

15.less语法

变量
混合
嵌套
内置函数
作用域

posted @ 2020-04-09 20:31 zero博士阅读(334) 评论(0) 收藏举报

刷新页面返回顶部