手机网站做分享到朋友圈,网页被禁止访问,如何设定旅游网站seo核心关键词,辽阳网站建设学校我们都知道#xff0c;Media Queries是实现响应式设计的秘密武器。在这篇文章中#xff0c;将向大家介绍制定高质量的Media Queries需要注意的一些事项
1. 让内容确定断点
很多时候#xff0c;在响应式设计中#xff0c;你经常看到的断点值是#xff1a;320px、480px、7…我们都知道Media Queries是实现响应式设计的秘密武器。在这篇文章中将向大家介绍制定高质量的Media Queries需要注意的一些事项
1. 让内容确定断点
很多时候在响应式设计中你经常看到的断点值是320px、480px、768px和1024px等
不要使用流行的设备尺寸320px是iPhone设备的竖屏尺寸480是iPhone设备横向屏幕尺寸768px是iPad竖向屏幕尺寸等等来确定断点。该设备的屏幕Device Landscape是不断在变化的所以使用流行设备的尺寸作为断点他的实际价值存在的意义可能没有什么甚至一年的时间都坚持不到。Web本质是流动的因此我们的工作是在任何屏幕上创建外观、功能等而不是简简单单的几个断点
2. 对布局作为一种增加
作为一个移动先行响应式设计策略重要的是我们要有一个移动先行的风格方式 这里当屏幕小于50em的时候column就会丢弃浮动而且width自适应单栏显示。而当屏幕大于50em的时候column就会左浮动而且宽度是50%。从而完成不同分辨率下面的不同展示风格
3. 使用相对单位
我常喜欢背靠着椅子使用我的电脑所以我经常使用cmd 来放大网站文本。当我们断点使用的是像素时页面放到出现水平滚动条并没有正常的工作 不应该使用像素我们应该为我们的媒体查询使用相对单位 首先在样式中我们都放弃了对像素(px)的使用在使用em、rem和百分比(%)那么我们为什么不能将这些相对单位运用到媒体查询中呢其次在媒体查询中使用相对单位允许浏览来调整设计基于用户缩放的级别让用户有一个更愉快、更容易阅读的用户体验
4. 超越宽度
视窗Viewport宽度不是唯一的媒体查询可检测的。有很多媒体特性我们可以检测包括颜色、颜色指数、纵横比、宽度以及装置设备宽度、高度和设计高度、方位、单色、分辨率、扫描、像素密度等等
虽然我不知道这么一大堆的东西是什么但有几个真正有用的功能可以帮助我们
- 使用pix-density可以有条件的提供更大的背景图、视网膜图标和高分辨率屏幕
- 使用height可以检测可用的屏幕高度并调整相应的样式风格。例如在这个网站我想根据高度来扩展我的标题类型
- 使用orientation来检测屏幕是横向还是纵向模式。取向可以用于有条件的禁用固定定位并释放出屏幕可用空间
5. 不要做得太过火
使用响应式设计很容易陷入所有媒体查询的魔法和变得有点疯狂。虽然媒体查询非常有趣但在设计中使用大量的复杂性会让你变得难堪。我们已经不得不花很多时间去处理这些复杂性设备屏幕令人眼花缭乱的浏览器和设备为了让客户和队友使用更加的舒服。我非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局
就这样现在就开始动手查询你的媒体查询
