1、em单位
继承父级,相对于自己
2、百分比
相对父级
3、研读了一段代码,用来将1rem转换为100px。
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', clientWidth, recalc = function() { clientWidth = docEl.clientWidth; if(!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
orientationchange:用户改变水平或垂直方向时触发。
DOMContentload:DOM结构加载完毕时触发。
4、模仿这上面的写了一段代码,用来时一块div内容占据整个可视区的剩余部分(出去头部部分)。
写法一 $(function(){ function calculateHeight(){ var dingqiHeight=document.documentElement.clientHeight; //获取可视区的高度 var dingqiWidth=document.documentElement.clientWidth; //获取可视区的宽度 var headerHeight=$('.dingqichanpin-header').height(); //获取头部标题的高度 var contentHeight=dingqiHeight-headerHeight; //计算内容区的高度 $('.dingqichanpin-content').height(contentHeight); if(dingqiWidth>dingqiHeight) $('.dingqichanpin-content').height(8.5+'rem'); //如果 手机变成横屏 设定一个固定的高度 }; calculateHeight(); window.onresize=function(){ //当屏幕尺寸改变时,重新计算高度 calculateHeight(); }; }) //写法二 (function(doc,win){ var docEl=doc.documentElement, resizeEvt='orientationchange' in window? 'orientationchange' : 'resize', //orienttationchange :方向变化,用户水平或垂直变化方向时触发 clientWidth, clientHeight, headerHeight, contentHeight, calculateHeight=function(){ clientHeight=docEl.clientHeight; //获取可视区的高度 clientWidth=docEl.clientWidth; //获取可视区的宽度 headerHeight=$('.dingqichanpin-header').height(); //获取头部标题的高度 contentHeight=clientHeight-headerHeight; //计算内容区的高度 $('.dingqichanpin-content').height(contentHeight); if(clientWidth>clientHeight) $('.dingqichanpin-content').height(8.5+'rem'); //如果 手机变成横屏 设定一个固定的高度 }; if(! doc.addEventListener) return; //如果dom没有addeventLister方法,就返回; win.addEventListener('DOMContentLoaded',calculateHeight,false); //window添加dom结构加载完毕就执行计算内容高度 DOMContentLoaded:dom结构加载完毕时执行 win.addEventListener(resizeEvt,calculateHeight,false); //window添加窗口改变大小就执行计算内容高度 })(document,window)
虽然不是很懂,第二种有什么好处,不过感觉高级了点。非常欢迎大神指导。
5、发现一个问题,还没解决。
部分手机 I 标签 属性改为 font-style:normal; 但是还是显示斜的。