Media Query-响应式布局
做响应式网站的时候,一定要在页面头部加入如下的声明:
- <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-响应式布局的更多相关文章
- CSS3学习笔记--media query 响应式布局
语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
- css3 @media 实现响应式布局
使用css3的@media,可以实现针对不同媒体.不同分辨率的响应式布局. 方法1:根据不同分辨率使用不同css文件 <link rel="stylesheet" media ...
- 六、使用media实现响应式布局
常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...
- 使用 media 实现响应式布局
最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo.其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要 ...
- 一种让 IE6/7/8 支持 media query 响应式设计的方法
在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...
- CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式 Med ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
- 利用media query写响应式布局
最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...
随机推荐
- ajax请求出现400错误
ajax请求出现400错误,如题.百度了只有两种情况,一个参数错误,二是所谓的参数过长. 因为我传递的base64的图片参数,很长.刚开始以为是这个原因.后来发现不是,原因是参数错误.freemake ...
- 简述react与vue的区别
React 和Vue是现在主流的两个框架(相对来说angular用的已经少了) 两者的区别体现在以下方面 相同点: 1.react和vue都支持服务端渲染 2.都有虚拟DOM,组件化开发,通过prop ...
- 解决XP系统桌面图标蓝底
方法1:在桌面上点击右键,在"排列图标"里去掉"锁定桌面的web项目"的勾. 方法2:右键点击 的电脑 -- 属性 -- 高级 -- 点击"性能&qu ...
- DUMP1 企业级电商项目
系统:centos6 配置mirror阿里云 https://opsx.alibaba.com/mirror 远程管理首选:ssh 账户密码登录(ssh user@host) 或者 本地私钥连接服务器 ...
- git 出现 fatal: refusing to merge unrelated histories 错误
git pull 失败 ,提示:fatal: refusing to merge unrelated histories 其实这个问题是因为 两个 根本不相干的 git 库, 一个是本地库, 一个是远 ...
- 第27月第28天 iOS bundle
1. 7.如果将自己打包的bundle给别人使用,别人在打包上传过程中可能会遇到错误提示如: ERROR ITMS-90171: "Invalid Bundle Structure - Th ...
- Tomcat7基于redis的session共享
一,项目需求 因开发人员在登录后台时需要反复认证,tomcat反复切换,所以给运维组提出需求,解决session共享问题. 二,解决方法 环境:基于Centos6.8 Jdk 版本 java ve ...
- C#Windows 服务的安装说明
安装/卸载的步骤: 1 . .点击 开始,运行中输入cmd,获取命令提示符win7需要已管理员的身份启动,否则无法安装 2. 输入 : cd C:\Windows\Microsoft.NET\Fram ...
- xenserver 上传centos6.8镜像
1.宿主机操作: # mkdir /iso # xe sr-create name-label=system-iso type=iso device-config:location=/iso de ...
- python 多线程小方法
import time from multiprocessing import Process, Lock, JoinableQueue from multiprocessing import Sem ...