章节
问答
课签
笔记
评论
占位
占位

Responsive设计(二)

(接上一节内容)

4.屏幕分辨率

屏幕分辨简单点说就是用户显示器的分辨率,深一点说,屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率,比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西,因为只有知道Web页面要在哪种分辨率下显示何种效果,才能调用对应的样式。

5.主要断点

主要断点,在Web开发中是一个新词,但对于Responsive设计中是一个很重要的一部分。简单的描述就是,设备宽度的临界点。在Media Queries中,其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说,就是使用主要断点和次要断点,创建媒体查询的条件。而每个断点会对应调用一个样式文件(或者样式代码),如下图所示:

上图的style.css样式文件运用在Web页面中,但这个样式文件包括了所有风格的样式代码,也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然,在实际中还可以使用另一种方法,也就是在不同的断点加载不同的样式文件,如下图所示。


上图主要显示的是主要断点,主要断点加载的不同样式文件直接将影响Web的效果。除了主要断点之外,为了满足更多效果时,还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后,需要维护的样式也相应的增加,成本也相对应的增加。因此在实际使用中,需要根据自身产品需求,决定断点。

综合下来,设置断点应把握三个要点:满足主要的断点;有可能的话添加一些别的断点;设置高于1024的桌面断点。

 

任务

本节无练习任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?