bootstrap之响应式布局
1.手动配置viewport
在HTML中:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
以上代码的作用是:让viewport的宽度等于当前设备的宽度,同时不允许用户手动缩放,其中initial-scale=1.0和maximum-scale=1.0不是必须要添加的,需要根据用户需求,其中width=device-width是必须的,这样可以保证不会出现横向滚动条。
meta viewport的属性:
width:设置layout viewport的宽度,为正整数也可以为“device-width”的字符串;
height:设置layout viewpor的高度,很少用;
initial-scale:设置页面初始缩放比例,可以为小数;
maximum-scale:页面的最大缩放比例;
minimum-scale:页面的最小缩放比例;
user-scalable:是否允许用户缩放,值为yes或no,当不允许用户手动缩放时则不需添加minimum-scale和maximum-scale。
2.媒体查询
在HTML代码中:
<link rel="stylesheet" media="(max-width:480px)" href="mobile.css">
以上代码的意思是如果viewport的max-width=480px被满足了,则使用mobile.css的样式。
以上代码的功能还可以通过@media(max-width:480px){...}来实现,将其放在被引入css样式的代码中。
3.媒体类型
all 用于所有设备;print用于打印机;projection用于方案展示,比如幻灯片;screen用于电脑显示器;等
4.媒体特性
参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
例如:@media(orientation:portrait){..}
aspect-ratio 可视化宽高比 例如:aspect-ratio:3/2 ; 3为宽比例 2为高比例 ,同时支持max和min;
device-aspect-ratio 设备可视化宽高比,用法同上;注意窗口不等于可视窗口
orientation 设备的使用方向 例如:orientation:landscape;landscape为水平方向,portrait为垂直方向;
height 可视化窗口高度 ;device-height 窗口高度(判断设备宽高),支持max和min;
width&0device-width用法同上;
4.操作符
使用and可以将不同的媒体特性组合在一起,即可以包含一个媒体类型和多个媒体表达式
@media screen and (min-width:480px){..};
使用,逗号可以分隔不同的媒体查询,相当于 or
@media screen and(max-width:980px),screen and(min-width:480px){..}
使用not操作符,用于排除特定的媒体类型,使用not操作符时一定要指定媒体类型,如果没有指定媒体类型,会永远返回假的值
@media not screen and (min-width:700px){...}
以上代码是先判断min-width然后才使用not
使用only操作符,用于指定特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
bootstrap之响应式布局的更多相关文章
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 基于 bootstrap html 响应式 布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
随机推荐
- 浅析history hack、心血漏洞、CSS欺骗、SQL注入与CSRF攻击
漏洞产生的原因主要有系统机制和编码规范两方面,由于网络协议的开放性,目前以 Web 漏洞居多 关于系统机制漏洞的典型有JavaScript/CSS history hack,而编码规范方面的漏洞典型有 ...
- Groovy脚本基础全攻略
1 背景 Groovy脚本基于Java且拓展了Java,所以从某种程度来说掌握Java是学习Groovy的前提,故本文适用于不熟悉Groovy却想快速得到Groovy核心基础干货的Java开发者(注意 ...
- 大牛们是如何开发 WordPress 主题的?
自己算是写过一个主题,目前也在用( 这里 -> http://udonmai.com/ ),所以多少想说两句. 当初走上web开发的路之后最想干的事情就是写个自己的WP主题...所以网上搜罗了很 ...
- GitHub:Microsoft
ylbtech-GitHub:Microsoft 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. https://github.com/microsoft ...
- Linux基础(二)之命令
01-基础命令 1. 创建一个目录 mkdir /data 创建多级目录 mkdir -p /oldboy/data 2. 查看目录里面的内容 ls /data 3. 查看目录里面的详细信息 ls - ...
- Django auth 用户验证
## Django本身内建这样的功能,admin管理页面就使用了这样的验证机制,admin管理页面就有Groups和Users选项 ## 需要在models.py中导入 from django.con ...
- 使用robotframework做接口测试三——保持登录状态
调用登录接口登录了,其他的接口怎么保持登录状态呢? 首先来看一看,web端或者说客户端是怎么样用cookie/token等保持登录状态的.一般来说,cookie都会在登录接口由服务端返回,而且会是在 ...
- 问题 1014: [编程入门]阶乘求和python):(本地测试正确;但提交不对!!??)求教
问题 1014: [编程入门]阶乘求和 时间限制: 1Sec 内存限制: 128MB 提交: 27629 解决: 5450 题目描述 求Sn=1!+2!+3!+4!+5!+…+n!之值,其中n是一个数 ...
- JavaScript基础之常用事件
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...
- beego 如何自定error
beego通过Redirect方法来进行跳转: 1 2 3 func (this *AddController) Get() { this.Redirect("/", 30 ...