响应式及Bootstrap
一丶CSS3的@media 查询
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型(mediaType): screen: 电脑屏幕,平板电脑,智能手机. speech:屏幕阅读器等发声设备
media feature:
1.max-width:定义输出设备中的页面最大可见区域宽度
2.min-width:定义输出设备中的页面最小可见区域宽度
1.编写响应式页面
(1)设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width = device-width:宽度等于当前设备的宽度
initial-scale: 初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
(2)加载兼容文件JS
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
(3)设置IE渲染方式默认为最高(可选)
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。
示例:
(1)如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min-width: 1170px) {
body {
background-color:lightblue;
}
}
(2)当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式
@media screen and (min-width:768px) and (max-width:992px) {
/* CSS 代码 */
}
二丶移动端单位介绍
在W3C中把尺寸单位划为两类:相对长度单位和绝对长度单位
然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位
字体相对单位有：em、ex、ch、rem；
视窗相对单位则包含：vw、vh、vmin、vmax几种
绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。
px: 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位
%：相对定位（会有影响发生变化）相对于父级（自身）大小进行定位
缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制
em: 相对定位 （会有影响发生变化） em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦
rem
r==root
em=字体大小 font-size
rem 相对单位
只依赖于html字体大小
动态的修改根元素的font-size:
需要通过js去控制
/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px 1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem
*/ !(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width)
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
}; win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
将上面的文件引入到当前项目中，
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<title>移动端布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
html{
width: 100%;
height: 100%;
/*font-size: 30px;*/
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: auto;
}
.head-box{
width: 100%;
height: 4rem;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.list{
margin-top: 4rem;
font-size: 1.5rem;
} .list .item{
float: left;
width: 7rem;
height: 7rem;
border: 1px solid black;
margin: 0.25rem; } </style>
</head>
<body> <header class="head-box">
<div class="head-top"></div>
<div class="head-bottom"></div>
</header> <ul class="list clearfix">
<li class="item">1111111</li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul> </body>
<script src="./js/resize.js"></script>
</html>
三丶Bootstrap学习
响应式及Bootstrap的更多相关文章
- 响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
- web响应式之bootstrap的基础用法。
1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...
- 响应式框架Bootstrap
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...
- fcc 响应式框架Bootstrap 练习2
text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary text-center"> ...
- 响应式与bootstrap
一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...
- 响应式布局 Bootstrap（01）
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
- 10套免费的响应式布局 Bootstrap 模版
1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...
- 响应式框架Bootstrap栅格系统
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- 响应式(2)——bootstrap的响应式
<meta name="viewport" content="width=device-width,user-scalable=no"/> < ...
随机推荐
- Load Runner 变量、参数的简单使用
Action(){ 定义数组时一定要指明大小 变量定义一定要放在所以操作之前,放在脚本最前面 int num ;//定义数值变量 int numy[5];//定义整型数组 char *str1 ...
- Spring开发环境搭建
----------------siwuxie095 Spring 是运行在 Java 环境下的开发框架,因此在开发前需要 准备以下相关软件: JDK 7 或者以上版本 Eclipse 4 或以上版本 ...
- 树莓派 Learning 002 装机后必要的操作 --- 10 实现本地电脑与远程桌面之间复制粘贴（传输）文件
树莓派 装机后必要的操作 - 实现本地电脑与远程桌面之间复制粘贴(传输)文件 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 PC端系统:w ...
- 12. CTF综合靶机渗透(五)
运行环境 Virtualbox (二选一) Vnware Workstation player 通关提示 fristi 设置 首先,我们在开始之前,我们按照作者的要求设置虚拟机的MAC地址 08:00 ...
- vue + eCharts 实现图表展示
一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...
- 给 asp.net core 写一个简单的健康检查
给 asp.net core 写一个简单的健康检查 Intro 健康检查可以帮助我们知道应用的当前状态是不是处于良好状态,现在无论是 docker 还是 k8s 还是现在大多数的服务注册发现大多都提供 ...
- 如何在MySQL中设置外键约束
引用:http://blog.sina.com.cn/s/blog_53729e4601011wja.html MySql外键设置详解 (1) 外键的使用: 外键的作用,主要有两个: 一个是 ...
- Spark Context 概述
1. Spark 程序在运行的时候分为 Driver 和 Executor 两部分: 2. Spark 的程序编写是基于 SparkContext 的,具体来说包含两方面: a) Spark 编 ...
- 洛谷P1038 神经网络
P1038 神经网络 题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸多领域有广泛的应用.对神 ...
- 一文带你看懂WebSocket 的原理？为什么可以实现持久连接？
工作之余在知乎上偶然看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇让我对 websocket 的认知深刻易懂,之前看总完总觉得一知半解云里雾里.所以与大家共同分享一下一起学习.比较喜欢这种博客理 ...