• 这几天工作的总结


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

  • 相关阅读:
    Now Task
    数据库的死锁及解决
    Java小对象的解决之道——对象池(Object Pool)的设计与应用
    Java中的对象池技术
    npm install时报错 npm ERR!Windows_NT 6.1.7601
    Angular 入门学习
    React 之 Hello world
    react webpack.config.js 入门学习
    React/React Native 的ES5 ES6写法对照表
    ES5和ES6中对于继承的实现方法
  • 原文地址:https://www.cnblogs.com/gaidalou/p/5980018.html
Copyright © 2020-2023  润新知