首页 > 代码库 > 这几天工作的总结

这几天工作的总结

2024-08-17 05:39:28   226人阅读

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; 但是还是显示斜的。

这几天工作的总结


联系
我们