标签：css3 ratio 媒体 screen 查询 视口 aspect 宽高比

CSS3媒体查询以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式，最常用的查询是处理视口高度和宽度的查询，其次便是宽高比例查询。CSS3媒体查询跟bootstarp的响应式特别相似。

媒体类型：
　　all：适用于所有设备。
　　print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
　　screen：主要适用于屏幕。
　　speech：主要适用于语音合成器。

媒体功能：
　　width：可视化宽度
　　height ：可视化高度
　　aspect-ratio：视口的宽高比宽高比
　　orientation：视口的方向
　　resolution：输出设备的像素密度
　　prefers-reduced-transparency：透明度设置
　　grid：设备是否使用网格或位图屏幕
　　update：输出设备修改内容外观的频率
　　overflow-block：输出设备如何处理沿块轴溢出视口的内容
　　overflow-inline：可以滚动沿着内联轴溢出视口的内容

eg:

@media screen and (min-width: 768px)  {
        //常规用法
}

@media screen and (max-aspect-ratio: 1200/1000) {
        //宽高比常规用法
}

@media screen and (min-width: 768px) and (max-width:1024px) {
        //用and结合多条件
}

@media screen and (max-aspect-ratio: 1200/1000) and (min-aspect-ratio: 700/1000){
        //宽高比结合多条件
}

标签：css3,ratio,媒体,screen,查询,视口,aspect,宽高比
来源： https://www.cnblogs.com/comedy/p/12942058.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。