1.媒体查询

通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

它们是响应式设计 (en-US)的关键组成部分。例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小。

在 CSS 中，使用 @media at-rule 根据媒体查询的结果有条件地应用样式表的一部分。使用 @import 有条件地应用整个样式表。

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。例如，仅当您的浏览器的viewport宽度等于或小于12450px时，此CSS才会应用样式：

@media (max-width: 12450px) { ... }

媒体类型

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

all

适用于所有设备。

print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）

screen

主要用于屏幕。

speech

主要用于语音合成器。

条件之间用and连接切and前后加空格

2.移动端兼容

使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异

我们在这里推荐使用rem和em作业移动端的单位来兼容不同的手机

em是相对于父级单位的大小来显示的，不够固定所以一般使用rem作为移动端的主流单位因为rem是相对于根元素html的大小来显示的 html的大小相对固定

100px就代表.1rem .1rem(设计稿中的实际大小)=100px*根元素的.1rem

设计稿中的宽度是200px 应该换算为20rem

设计稿设备宽度是750px

目前谷歌浏览器的html默认的font-size的大小是16px

但是不能保证其他浏览器的根元素的字体大小都是一致的

所以我们推荐手动设置根元素的大小

CSS媒体查询及移动端兼容相关推荐

css 媒体查询移动端,媒体查询（pc端，移动端不同布局）
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕手机 (<7 ...
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
CSS媒体查询：最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
什么是CSS媒体查询
什么是CSS媒体查询? 一.CSS媒体查询概念 CSS媒体查询即media quaries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局.也可以针对不同的分辨率定义不同的样式. 1024分 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...

CSS媒体查询及移动端兼容

1.媒体查询

媒体类型

2.移动端兼容

CSS媒体查询及移动端兼容相关推荐

最新文章

热门文章