面试题6

Posted 2020-11-26 airoocle

1、输入网址之后做了哪些事？

　　1、输入网址

　　2、DNS 解析

　　3、建立 TCP 链接

　　4、客户端发送HTTP 请求

　　5、服务端处理请求

　　6、服务端相应请求

　　7、浏览器获取展示 html

　　8、浏览器请求获取HTML 中的资源

 

2、rem 与 em 的区别？

　　em  是相对于 本身 font-size 的大小

　　rem  是相对于 html  的 字体大小

　　em 要达到响应式太麻烦

 

3、rem 与 js 实现屏幕适配？

　　

 

 

  <script>

    window.addEventListener(‘resize‘, setHtmlFontSize)

    setHtmlFontSize();

    function setHtmlFontSize() {

        // 根据屏幕的宽度来改变根元素的字体大小的值

        // 当前屏幕 / 标准的375屏幕 求得你当前屏幕是标准屏幕的多少倍  * 标准屏幕根元素的字体大小

        // 当前屏幕的宽度 / 375 * 100

        // 假如当前750/375 = 2 * 100 == 200px  

        // 1. 当前屏幕的宽度

        var windowWidth = document.documentElement.offsetWidth;

        // 限制最大屏幕 和最小屏幕

        if(windowWidth > 750){

                windowWidth = 750;

        }else if(windowWidth < 320){

                windowWidth = 320;

        }

        //2. 标准屏幕的宽度

        var StandardWidth = 375;

        // 标准屏幕的html的字体大小

        var StandardHtmlFontSize = 100;

        //3. 当前屏幕需要设置的根元素的字体大小

        var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;        

        //4. 把当前计算的html 字体大小设置到页面的html元素上就可以

        document.querySelector(‘html‘).style.fontSize = htmlFontSize + ‘px‘;

    }

    </script>