android 媒体查询,CSS常用媒体查询应用

原标题：CSS常用媒体查询应用

媒体类型

sans - serif字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

逻辑操作符

可以使用 not ， and 和 only 等逻辑操作符构建复杂的媒体查询。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。默认为 all 所有媒体类型。and用于合并多个媒体属性或合并媒体属性与媒体类型

not 用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备

only 仅在媒体查询匹配成功的情况下应用指定样式

语法

常用媒体属性

设备输出分辩率(打印分辩率)：dpi, dpcm, dppx

指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

每英寸包含点的数量(dots per inch)

普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi(即2dppx)，打印时一般会需要更大的dpi；

1dppx = 96dpi

1dpi ≈ 0.39dpcm

1dpcm ≈ 2.54dpi

分辨率PPI与DPI

Media query只接受单个的逻辑表达式作为其值或者没有值

Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况著作权归作者

横竖屏的判断

注意部分 Android 中有bug

当输入框获得焦点，触发弹出键盘后，横屏的样式出现了，然而他使用的是竖屏，并未把手机横过来。

添加宽度限制，屏幕宽度大于450px时，并且是横屏时，应用横屏样式

高清图片适配

在普通屏下使用@1x图片，在高清屏下使用@2x图片

屏幕适配

移动端配合 rem 使用，适配不同宽度的屏幕

适配独立的样式文件

设备判断

调整模块的样式

责任编辑：

android 媒体查询,CSS常用媒体查询应用相关推荐

html标签查询,css性性查询,javascript函数查询
我了大家的方便,我整理了下前端常用的html标签查询,css性性查询,javascript函数查询,希望对大家的工作有帮助! ************************************* ...
HTML引入媒体查询CSS,CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则. 例如:你可以针对不同的媒体类型(包括显示器.便携设备.电视机,等等)设置 ...
html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...
mysql用时查询_mysql 常用时间查询
24小时内记录(即24*60*6086400秒) $sql="SELECT video_id,count(id)as n FROM `rec_down` WHERE UNIX_TIMESTA ...
django常用的模型字段类型和常用的查询
IntegerField : 整型,映射到数据库中的int类型. CharField: 字符类型,映射到数据库中的varchar类型,通过max_length指定最大长度. TextField: 文本 ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
CSS如何设置高度为屏幕高度_（15）让这些“展示”有更好的扩展性——媒体查询 | CSS...
原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

android 媒体查询,CSS常用媒体查询应用

android 媒体查询,CSS常用媒体查询应用相关推荐

最新文章

热门文章