一、响应式的实现-媒介查询
@media
实现方式一:把media限定到link中
<div class="box1"></div> <div class="box2"></div> |
<!--响应式页面兼容移动端代码--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/media1.css" media="screen and (max-width:1000px)"/> <link rel="stylesheet" type="text/css" href="css/media2.css" media="screen and (min-width:1000px) and (max-width:1500px)"/> <link rel="stylesheet" type="text/css" href="css/media3.css" media="screen and (min-width:1500px)"/> |
实现方式二:把media写到css代码中
留活口,ie兼容
@charset "utf-8";
*{ margin: 0; padding: 0; }
aside{ height: 200px; width: 20%; float: left; background: orange; } div{ height: 200px; width: 40%; float: left; }
div.box1{ background: blue; }
div.box2{ background: pink; }
@media only screen and (min-width: 1000px) and (max-width: 1500px) { aside{ display: none; } div.box1{ width: 50%; background: red; } div.box2{ width: 50%; background: purple; } }
@media only screen and (max-width: 1000px) { aside{ display: none; } div.box1{ width: 100%; background: yellow; } div.box2{ width: 100%; background: greenyellow; }
1 } |
二、bootstrap介绍
2.1 bootstrap概述
bootstrap 是世界上最受欢迎的前端框架,用于构建响应式、移动设备优先的网站。
bootstrap分为“全局css样式”、“组件”、“javascript插件”这么几个主要的部分。
设置全局 css 样式
基本的 html 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
组件
无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
javascript插件
jquery 插件为 bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的 页面中。
2.2 bootstrap引入:
npm 需要安装环境node.js
cdn 在线方式,需要联网
离线的方式 下载引入自己的网站中
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-gn5384xqq1aowxa+058rxpxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm" crossorigin="anonymous"> 1 <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"--> |
2.3 容器及标题标签
类名.container 根据不同视口给出不同的方案,但是都是页面居中的效果
类名 .container-fluid 宽度百分百
标题标签 单位rem 改变了w3c标准样式
<div class="container border2"> <!-- content here --> <h1>这是bootstrap</h1> <h2>这是bootstrap</h2> <h3>这是bootstrap</h3> <h4>这是bootstrap</h4> <h5>这是bootstrap</h5> <h6>这是bootstrap</h6> 1 </div> |
2.4 媒体查询:
// small devices (landscape phones, 576px and up)@media (min-width: 576px) { ... } // medium devices (tablets, 768px and up)@media (min-width: 768px) { ... } // large devices (desktops, 992px and up)@media (min-width: 992px) { ... } // extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { ... } 1 |
或:
// extra small devices (portrait phones, less than 576px)@media (max-width: 575.98px) { ... } // small devices (landscape phones, 576px and up)@media (min-width: 576px) and (max-width: 767.98px) { ... } // medium devices (tablets, 768px and up)@media (min-width: 768px) and (max-width: 991.98px) { ... } // large devices (desktops, 992px and up)@media (min-width: 992px) and (max-width: 1199.98px) { ... } // extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { ... } 1 |
1 |
2.5 网格布局
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
类名row 行 必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
类名 col- 列、栏 通过“行(row)”在水平方向创建一组“列(column)” ,内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素
一行一共有12栏,如果一行多余12栏,会自动换行
响应式:
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
关注微信公众号“icketang”,获取最新前端资讯,学习资料
完整笔记、web前端视频教程,请添加微信“haomei0452”免费领取
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战