浅谈响应式页面技术方案.pptx

浅谈响应式页面;一、媒体查询; ;语法结构及用法 @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;} };动态计算不同像素下的字体大小;4、宽的设置 a、大模块宽度以百分比算 b、部分模块也可以用弹性盒子设置 5、高的设置 a、高度可以直接用em、rem设置，这样方便部分模块行高的设置； b、也可以让他完全自适应，使用padding-bottom设置，但是这种做法弊端也很大，例如：按钮的文本垂直居中不好设置。不建议使用。 c、侧遍栏固定定位时，根据排版不同，可以使用js动态设置它的高度，使他在不同设备下实现自适应。例如：;HTML代码 div class=sidebarmain ul class=sidebar fts12 id=sidebar li class=sidelist checked贷款简介/li li class=sidelist贷款种类/li li class=sidelist贷款方式/li li class=sidelist贷款利率/li li class=sidelist申请条件/li li class=sidelist贷款资料/li li class=sidelist担保流程/li li class=sidelist贷款利率/li li class=sidelist贷款额度/li li class=sidelist影响因素/li /ul /div; js代码 //计算侧边导航li元素高度 var wheight=$(window).height(); var headheight=$(header).height(); var footerheight=$(footer).height(); var length=$(.sidebar).children(li).length; var sidebarheight=wheight-headheight-footerheight-(length+1); var liheight=sidebarheight/length; $(.sidebar li).height(liheight+px); $(.sidebar li).css(line-height,liheight+px);;6、字体大小设置 基准字体 html{font