文档章节

@media自适应的几个关键像素

筱飞
 筱飞
发布于 2016/11/30 14:21
字数 552
阅读 24
收藏 0

一,关键像素的来源

先看下面的代码,这是从bootstrap中遍历出来的,min-width来确认分别是

768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了

运用@media实现网页自适应中的几个关键分辨率

二,常用的关键像素

从上面我们可以看出有几个临界点的分辨率,那么我们就可以轻松的来写自己的自适应代码了

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

三,不同的设备

示例

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

这里我们看到media后面有screen,用于电脑屏幕,平板电脑,智能手机等。

完整列表如下

all 用于所有设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视

本文转载自:http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html

共有 人打赏支持
筱飞
粉丝 14
博文 138
码字总数 22786
作品 0
虹口
前端工程师
私信 提问
响应式和自适应区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http...

前端_牛牛
2016/01/20
277
2
自适应网页设计的方法(手机端良好的访问体验)

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验...

DanielYue
2018/06/29
0
0
自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的...

阮一峰
2012/05/01
0
0
关于web中的自适应布局

一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 二、允许网页宽...

名字已被取
2016/04/15
80
0
HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果。对CSS3不是特别的熟练,只...

初雪之音
2016/07/19
72
0

没有更多内容

加载失败,请刷新页面

加载更多

GlusterFS的再次节点重置和恢复

采用Ubuntu+ZFS+GlusterFS的存储集群,其中一个节点再次出现故障,gluster volume status显示为N/A状态。 检查网络,发现原来的IP地址 10.1.1.193发生了改变(估计被DHCP重新分派地址了),导...

openthings
27分钟前
5
0
BOM与正则表达式

BOM BOM的全称叫做Browser OjbectModel 浏览器对象模型,它定义了操作浏览器的接口。 BOM对象包括:Window、History、Navigator、Screen和Location。但是由于浏览器厂商的不同,BOM对象的兼容...

Panda-Q
27分钟前
1
0
牵头函数

箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或new.target。这些函数表达式更适用于那些本 来需要匿名函数的地方,并且它们不能用作构造函数。 首先:我们先...

wshining
33分钟前
1
0
mysql把一个数据库中的数据复制到另一个数据库中的表 2个表结构相同

首页 问题 全部问题 经济金融 企业管理 法律法规 社会民生 科学教育 健康生活 体育运动 文化艺术 电子数码 电脑网络 娱乐休闲 行政地区 心理分析 医疗卫生 精选 知道专栏 知道日报 知道大数据...

linjin200
34分钟前
1
0
python redis操作

redis命令:http://blog.csdn.net/yhl27/article/details/9936189 python redis: 干货 http://www.cnblogs.com/wangtp/p/5636872.html http://doc.redisfans.com/ http://developer.51cto.......

stys35
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部