浅谈响应式页面.pptx

浅谈响应式页面 一、媒体查询 1、适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代，该设计可以根据屏幕大小进行上扩和下扩。利用响应式设计，无论您采用什么设备或屏幕来访问网站，都可以呈现一个可用的界面。响应式设计可以响应各种屏幕大小，因此也成为了 “前瞻性” 的网站，屏幕将随着新的智能手机和平板电脑的问世而快速演变。实现响应式设计的主要途径是使用 CSS 媒体查询。 2、响应式页面最主要需要考虑的就是： 1) 媒体查询节点的设置 2) 宽、高的设置 3) 字体大小的设置 注： 2和3都依附在1之上  3、媒体查询节点的设置 CSS中的Media Query（媒介查询）是什么？ 通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。 语法结构及用法 @media 设备名 only （选取条件） not （选取条件） and（设备选取