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

<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. Linux 内核中的数据结构:基数树(radix tree)

    转自:https://www.cnblogs.com/wuchanming/p/3824990.html   基数(radix)树 Linux基数树(radix tree)是将指针与long整数键值相 ...

  2. React 记录(1)

    作为一个前端工程师,前端框架是必须会的,所以开始学习React. 学习的方法是:先实践,后图文记录. React官网:https://reactjs.org React中文网站:https://www ...

  3. go结构体方法

    Golang中的方法是作用在特定类型的变量上,因此自定义类型,都可以有方法,而不仅仅是struct. 定义格式 func (var *Struct_Name) FuncName( var0, var1 ...

  4. 有关mysql的innodb_flush_log_at_trx_commit参数

    一.参数解释 0:log buffer将每秒一次地写入log file中,并且log file的flush(刷到磁盘)操作同时进行.该模式下在事务提交的时候,不会主动触发写入磁盘的操作. 1:每次事务 ...

  5. 【转】javascript代码混淆和压缩

    隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码 http://www.yaohaixiao.com/tools/confuse-and-compressing-ja ...

  6. 三十八、Linux 线程——线程属性初始化、销毁、设置和获得分离属性

    38.1 线程属性初始化和销毁 #include <pthread.h> int pthread_attr_init(pthread_attr_t *attr); int pthread_ ...

  7. 【bzoj 1492】[NOI2007]货币兑换Cash

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个实 ...

  8. Factorized Hidden Variability Learning For Adaptation Of Short Duration Language Identification Models

    基于因子分解的隐层变量学习,应用于短语句语种识别模型的自适应     LFVs(Language Feature Vectors,语种特征向量)[11],与BSVs(Bottleneck Speake ...

  9. 阿里云三台CentOS7.2配置安装CDH5.12

    1 购买3台阿里云服务 2 配置好ssh连接客户端 根据自己情况连接 3 安装好MySQL5.7 跳过,见之前博客 安装在hadoop001上 4 设置好Hosts文件 3台机器同时操作 vim /e ...

  10. scrapy框架的每个模块的用途

    ## 一.scrapy框架的每个模块的用途 1.spiders: 自定义爬虫 定义允许爬取的范围 定义开始爬取的url parse:一定要重写 start_request:一般不需要重写,可以通过重写 ...