做响应式网站的时候,一定要在页面头部加入如下的声明:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  

width=device-width 样式中定义的宽度等于设备中定义的宽度

initial-scale=1.0 缩放比例1

minimum-scale=1.0 最大缩小比例1

maximum-scale=1.0 最大放大比例1

  上段代码的最终作用是,移动客户端会按你设定的尺寸来显示页面。并且比例是1,不可通过手势放大缩小。 如果不写这段代码,移动客户端的浏览器真的会以它的1px来显示你设定的1px。最终效果是被缩放的效果,字小小的那种。 总之,做响应式网站的时候记得至少要加上如下声明。

什么是Media Query?

CSS2允许用户对特定media类型制定样式。

例如: 针对screen(屏幕)用 @media screen{ ... }里设定的样式。 针对打印样式用 @media print{ ... } 里的样式。

CSS3提供了更加强大的功能。 可以针对不同media类型设置样式,还根据设定的宽度或者高度指定样式。

@media screen and (max-width: 500px) {
body { background-color: black; }
}

 意思就是: 当屏幕的宽度小于等于500px的时候body的背景颜色为黑色。

 

相关英语

viewport = 视口

content = 内容

device-width = 设备宽度

initial-scale = 初始-比例

minimum-scale = 最小-比例

maximum-scale = 最大-比例

media = 媒体

query = 查询


仅供学习参考,原文链接:https://www.cnblogs.com/luoruiyuan/articles/5482042.html

Media Query-响应式布局的更多相关文章

  1. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

  2. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  3. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  4. css3 @media 实现响应式布局

    使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...

  5. 六、使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...

  6. 使用 media 实现响应式布局

    最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo.其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要 ...

  7. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  8. CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

    点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式   Med ...

  9. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  10. 利用media query写响应式布局

    最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...

随机推荐

  1. eclipse将javaSE项目导出成可执行jar包

    将第三方包和项目打包到一块 step1:选中要导出的项目,右键选择Export step2:选择java/Runable JAR file step3:选择main主程序,选择第三方包打包的形式,推荐 ...

  2. 在js或jquery中动态添加js脚本【转】

    起因: 我们在用js动态写入script时,会导致</script>后面的所有语句都变为普通文本,导致html展示无效, 所以我们需要规避</script>问题. 解决方案一( ...

  3. sqoop 使用

    spark 环境搭建 下载解压 wget https://mirrors.tuna.tsinghua.edu.cn/apache/sqoop/1.4.7/sqoop-1.4.7.bin__hadoop ...

  4. UUID在Java中的实现与应用

    UUID是什么 UUID的全称为:Universally Unique IDentifier,也被称为GUID(Globally Unique IDentifier).是一种由算法生成的唯一标识,它实 ...

  5. Kettle系列: kettle标准化trans模板

    =============================主控trans + sub trans 模式=============================针对一个具体的处理任务(比如增量加载一个 ...

  6. IDAPython学习(二)

    1.常用函数 ScreenEA() 获取IDA调试窗口中,光标指向代码的地址.通过这个函数,我们就能够从一个已知的点运行我们的脚本. GetInputFileMD5() 返回IDA加载的二进制文件的M ...

  7. (一)python的前世今生

    一:Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum)(目前还活着),诞生于1989年,是一个脚本解释程序,由于python语言结构优美,清晰简单,随着人工智能 ...

  8. linux如何查看端口号被哪个进程占用

    1.lsof -i:端口号 lsof(list open files) 2.netstat -tunlp |grep 端口号 t:tcp u:udp n:拒绝显示别名 l:仅显示listen的服务状态 ...

  9. Leetcode#561. Array Partition I(数组拆分 I)

    题目描述 给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最 ...

  10. 帝国cms建站方法和知识点

    帝国cms建站方法和知识点 1.  首先在帝国cms网站上下载模板系统.根据模板系统上的提示,将指定的目录文件放在指定的位置.然后进行安装.后台管理系统的命名设置.数据库的设置等等. 2.  安装完成 ...