浅谈响应式页面辩析.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（设备选取条件），设备二{sRules} 示例一：在link中使用@media： link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/ 上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。 示例二：在样式表中内嵌@media： @media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules} 在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 但是我们平时做项目时就没有写的那么复杂了， 例子： html{ font-size-adjust: none; font-size: 10px; /* 基本字体 */ } @media only screen and (max-width:319px ){ html{font-size: 8px;} } @media only screen and (min-width:320px ) and (max-width:375px ){ html{font-size: 10px;} }。。。。。。。 @media only screen and (min-width:1200px ){ html{font-size: 22.5px;} } 动态计算不同像素下的字体大小 script type=text/javascript var clientWidth = document.documentElement.clientWidth; if(clientWidth 640) clientWidth = 640; document.documentElement.style.fontSize = document.documentElement.clientWidth / 32 + px; /script 基准字体10px;大于640像素时字体大小始终为20px. 注：网页可见区域宽： document.body.clientWidth; 4、宽的设置 a、大模块宽度以百分比算 b、部分模块也可以用弹性盒子设置 5、高的设置 a、高度可以直接用em、rem设置，这样方便部分模块行高的设置； b、也可以让他完全自适应，使用padding-bottom设置，但是