技术文章 | Technical articles

html5源码笔记(四)—前端培训机构

一、响应式的实现-媒介查询

@media

实现方式一:把media限定到link


<aside></aside>

<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;

}

 

}

 

 

二、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">

 <!--<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>

</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) { ... }

或:

// 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) { ... }

 

 

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-

图片1.png 



关注微信公众号“icketang”,获取最新前端资讯,学习资料
 

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: html5源码笔记(三)——前端培训机构
下一篇文章: JavaScript(第一天)—web前端培训
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>