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之响应式布局的更多相关文章

  1. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  2. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  3. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  4. 基于 bootstrap html 响应式 布局

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  5. 响应式布局之BootStrap

    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...

  6. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  7. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

  8. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  9. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

随机推荐

  1. 浅析history hack、心血漏洞、CSS欺骗、SQL注入与CSRF攻击

    漏洞产生的原因主要有系统机制和编码规范两方面,由于网络协议的开放性,目前以 Web 漏洞居多 关于系统机制漏洞的典型有JavaScript/CSS history hack,而编码规范方面的漏洞典型有 ...

  2. Groovy脚本基础全攻略

    1 背景 Groovy脚本基于Java且拓展了Java,所以从某种程度来说掌握Java是学习Groovy的前提,故本文适用于不熟悉Groovy却想快速得到Groovy核心基础干货的Java开发者(注意 ...

  3. 大牛们是如何开发 WordPress 主题的?

    自己算是写过一个主题,目前也在用( 这里 -> http://udonmai.com/ ),所以多少想说两句. 当初走上web开发的路之后最想干的事情就是写个自己的WP主题...所以网上搜罗了很 ...

  4. GitHub:Microsoft

    ylbtech-GitHub:Microsoft 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/microsoft ...

  5. Linux基础(二)之命令

    01-基础命令 1. 创建一个目录 mkdir /data 创建多级目录 mkdir -p /oldboy/data 2. 查看目录里面的内容 ls /data 3. 查看目录里面的详细信息 ls - ...

  6. Django auth 用户验证

    ## Django本身内建这样的功能,admin管理页面就使用了这样的验证机制,admin管理页面就有Groups和Users选项 ## 需要在models.py中导入 from django.con ...

  7. 使用robotframework做接口测试三——保持登录状态

    调用登录接口登录了,其他的接口怎么保持登录状态呢?  首先来看一看,web端或者说客户端是怎么样用cookie/token等保持登录状态的.一般来说,cookie都会在登录接口由服务端返回,而且会是在 ...

  8. 问题 1014: [编程入门]阶乘求和python):(本地测试正确;但提交不对!!??)求教

    问题 1014: [编程入门]阶乘求和 时间限制: 1Sec 内存限制: 128MB 提交: 27629 解决: 5450 题目描述 求Sn=1!+2!+3!+4!+5!+…+n!之值,其中n是一个数 ...

  9. JavaScript基础之常用事件

    js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...

  10. beego 如何自定error

    beego通过Redirect方法来进行跳转: 1 2 3 func (this *AddController) Get() {     this.Redirect("/", 30 ...