分享人:徐海达
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验, 答案是:采用响应式设计。 响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询,可以针对不同的媒体类型定义不同的样式。
媒体查询是界面为了适应不同屏幕大小而存在的 基本语法是: @media mediatype and(在)| not(不再)|only (仅在)(media feature (设备尺寸)) { CSS-Code; }
1.link元素中的CSS媒体查询 < link rel="stylesheet" media="(max-width: 800px)" href="example.css"
2.css样式表中媒体查询 @meadia all and (max-width: ) { } 第一种方法是css2媒体查询用法,最大的弊端是他会增加页面http的请求次数,增加了页面负担,我们用CSS3把样式都写在一个文件里面才是最佳的方法。
@media all and (min-width:1000px)
@media(一个声明)
媒体类型: all 用于所有配置 screen 用于电脑、平板电脑、智能手机等 print 用于打印机和打印预览 speech 用于屏幕阅读等发声设备
媒体属性(有很多种)
max-width 设备中的页面最大可见区域宽度
min-width 设备中的页面最小可见区域宽度
媒体类型有哪些
all 用于所有配置
screen 用于电脑、平板电脑、智能手机等
print 用于打印机和打印预览
speech 用于屏幕阅读等发声设备
感谢大家观看
BY : 徐海达