浅谈响应式页面

1、浅谈响应式页面一、媒体查询1、适用于所有屏幕大小的设计固定宽度的静态网站很快被灵活的响应式设计所取代，该设计可以根据屏幕大小进行上扩和下扩。利用响应式设计，无论您采用什么设备或屏幕来访问网站，都可以呈现一个可用的界面。响应式设计可以响应各种屏幕大小，因此也成为了 “前瞻性” 的网站，屏幕将随着新的智能手机和平板电脑的问世而快速演变。实现响应式设计的主要途径是使用 CSS 媒体查询。2、响应式页面最主要需要考虑的就是： 1) 媒体查询节点的设置 2) 宽、高的设置 3) 字体大小的设置 注： 2和3都依附在1之上3、媒体查询节点的设置CSS中的Media Query（媒介查询）是什么？通过不同的

2、媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的media和import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。语法结构及用法 media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二sRules 示例一：在link中使用media： 上面使

3、用中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 （ori

4、entation:portrait） srules 在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。但是我们平时做项目时就没有写的那么复杂了，例子： htmlfont-size-adjust: none;font-size: 10px; /* 基本字体 */ media only screen and (max-width:319px )htmlfont-size: 8px;

5、media only screen and (min-width:320px ) and (max-width:375px )htmlfont-size: 10px; 。 media only screen and (min-width:1200px )htmlfont-size: 22.5px; 动态计算不同像素下的字体大小 var clientWidth = document.documentElement.clientWidth; if(clientWidth 640) clientWidth = 640; d o c u m e n t . d o c u m e n t E l e

6、m e n t . s t y l e . f o n t S i z e = document.documentElement.clientWidth / 32 + px; 基准字体10px;大于640像素时字体大小始终为20px.注：网页可见区域宽： document.body.clientWidth;4、宽的设置a、大模块宽度以百分比算b、部分模块也可以用弹性盒子设置5、高的设置a、高度可以直接用em、rem设置，这样方便部分模块行高的设置；b、也可以让他完全自适应，使用padding-bottom设置，但是这种做法弊端也很大，例如：按钮的文本垂直居中不好设置。不建议使用。c、侧遍栏固定

7、定位时，根据排版不同，可以使用js动态设置它的高度，使他在不同设备下实现自适应。例如：HTML代码 贷款简介贷款种类贷款方式贷款利率申请条件贷款资料担保流程贷款利率贷款额度影响因素 js代码/计算侧边导航li元素高度var wheight=$(window).height();var headheight=$(header).height();var footerheight=$(footer).height();var length=$(.sidebar).children(li).length;var sidebarheight=wheight-headheight-footerheigh

8、t-(length+1);var liheight=sidebarheight/length;$(.sidebar li).height(liheight+px);$(.sidebar li).css(line-height,liheight+px);6、字体大小设置基准字体htmlfont-size: 10px; /* 基本字体 */*字体型号*/.fts10font-size: 1.0rem;.fts11font-size: 1.1rem;.fts12font-size: 1.2rem; 通过媒体查询里的字体大小就可以实现页面的字体大小的自适应了二、页面的头部之间的设置三、box-sizi

9、ng属性box-sizing: border-box;此时盒子的padding、border是内减的。box-sizing是IE9开始兼容的css3属性，智能手机中支持这个属性（过老的安卓版本除外），这个属性在流式布局中非常有用，是神器！box-sizing：这个属性计算了padding和border。但是没有计算margin。例如： .navmenu lifloat: left;width: 16.66%;height: 4rem;line-height: 4rem;text-align: center;background-color: #31B890;color: #FFFFFF;box-sizing: border-box; padding: 0.5rem; border-right: 2px solid #06B806;四、弹性盒子例：html代码 姓名男女 .dlstyledisplay: -webki