【media-queries】媒体查询,为了响应式设计而生
目录
- 简介
- 语法
- 常用尺寸
一 简介
针对现在纷杂的设备,css3中加入,可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断。
最常用的就是查询屏幕大小,给予适合的展示效果,即流行的响应式设计(Responsive Design)。
二 语法
1 简单的例子
@media only screen and (max-width:320px) {
.container {
width:90%;
padding:0 4%;
}
}
前半部分是media-type查询,后面看做是css查询。
2 如果是要大于320小于480像素
@media only screen and (min-width:320px) and (max-width:480px) {
.container {
// style for media(320px < width < 480px)
}
}
3
三 常用尺寸
iphone4 safari视窗高度(window.innerHeight) 356px;
iphone4 weixin视窗高度(打开网页时测算的window.innerHeight) 374px;
iphone5 相关尺寸都加88px就行了。
四 典型实例
五 好的网站收藏
注意:
1 max-width的宽,非屏幕的分辨率宽
买手机的时候,1280*800的像素,跟这里的max-width的像素值不是对应的。 因为android系统会自动进行放大,相当于在屏幕上有一个放大层,一个显示像素点可以有多个像素点组成,所以有的达到1280*800(如魅族mx2)但是不能显示的像1280*800浏览器显示的那么大,但是字体什么的显示的更加清晰。
2 width跟device-width的区别
width称为视口宽度,device-width称为屏幕宽度.
meta的viewport中 width=device-width 即把浏览器宽度设置成屏幕宽度。
【media-queries】媒体查询,为了响应式设计而生的更多相关文章
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- css媒体查询:响应式网站
css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- CSS:使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- Flex、Grid、媒体查询实现响应式布局
本篇文章主要讲述使用Flex布局.Grid布局以及媒体查询三种方式来实现响应式布局. 文章涉及代码在线coding地址 效果图: 文字描述: 屏幕大小不同,展示列数不同,1-5号按照屏幕大小可展示2到 ...
随机推荐
- 彻底去除Google AdMob广告
应用中包含广告是能够理解的,但经常造成用户误点,或者广告切换时造成下载流量,就有点让人不舒服了. 以下就以Google AdMob广告为例,看怎样彻底去除他. 先分析一下Google AdMob的工作 ...
- 利用VMware14安装虚拟机(Win7&CentOS6.4)
安装Win7 https://blog.csdn.net/Yangchenju/article/details/80694597 安装CentOS6.4 https://blog.csdn.net/u ...
- PyCharm for Mac 调整字体大小
网上的教程大多已过时,那个路径根本找不到,于是就有了本文. 前言 以前用 Sublime 时,直接快捷键CMD+[+/-](CMD加加号或减号)直接调整字体大小,非常方便,后来用 VSCode,字体大 ...
- java操作Excel的poi 格式设置
格式设置 package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi. ...
- Robot Framework(五)使用测试库
使用测试库 测试库包含那些最低级别的关键字,通常称为 库关键字,实际上与被测系统交互.所有测试用例总是使用某些库中的关键字,通常是通过更高级别的用户关键字.本节介绍如何使用测试库以及如何使用它们提供的 ...
- Python笔记1----数据类型
Python数据类型: 整型.字符串.浮点型.布尔型 列表.元祖.字典 1.整型: 范围: 32位机子:-231~231-1. 64位机子:-263~263-1 2.浮点型: ...
- 关于vcruntime140D.dll丢失问题
电脑磁盘占用率100%,又检测出硬盘磁道坏了,要么装win7,要么换个SSD,无奈重装环境. 遇到这个问题,之前的电脑就遇到过,网上交的下载这个文件装到C盘Windows的SysWOW64,对于实验室 ...
- canvas实现圆框图片
作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...
- JavaSE 学习笔记之接 口(六)
接 口: 1:是用关键字interface定义的. 2:接口中包含的成员,最常见的有全局常量.抽象方法. 注意:接口中的成员都有固定的修饰符. 成员变量:public static final ...
- 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛
题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...