《javascript基础》学习笔记 八


前言

学习地址:https://www.bilibili.com/video/BV1ZE411c7yM?p=81

一、navigator

navigator对象

window.pavigator的一些属性可以获取客户端的一些信息。

● userAgent:系统,浏览器)
● platform:浏览器支持的系统,win/mac/linux

响应式布局有应用

举例:

console.log(navigator. userAgent);.
console.log(navigator.platform);
  <style>
        #icon{
             width: 100px;
             height: 100px;
             background-size: 100% 100%;
        }
        .iphone #icon{
            background-image: url(img/iphone.png);
        }
        
        .pc #icon{
             background-image: url(img/PC.png);
        }
        
        .android #icon{
         background-image: url(img/android.png);   
        }
        
        .ipad #icon{
            background-image: url(img/ipad.png);
        }
     </style>
 </head>
 <body>
     <div id="icon">
         
     </div>
     <script>
        function wuxys(){
            var html = document.querySelector('html')
            var userAgent = navigator.userAgent; 
            //userAgent.indexOf( "iPhone"),通过此方法可以获取iphone在字符中的索引值
            html.className = "";
            if(userAgent.indexOf("iPhone")!=-1){
                html.classList.add("iphone")
            }else if(userAgent.indexOf("Android")!=-1){
                html.classList.add("android")
            }else if(userAgent.indexOf("iPad" )!=-1){ 
                html.classList.add("ipad")
            }else{
                html.classList.add("pc")
            }
        }

        wuxys()
        window.onresize =  function(){
            wuxys()
        }
     </script>
 </body>

打印结果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、rem布局

em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。
rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。
例如:
1、设计师设计网站的设计稿:1000
2、每个人打开网页时候,因为设备(手机或者电脑或者其他)不同,或者浏览器设定的分辨率不同,使得需要在不同的分辨率下打开
3、假如屏幕的大小,1000px,1rem == 100px(设计稿的宽度),10rem就会刚刚好占满整个屏幕的宽度 (屏幕大小/10)
4、假如屏幕的大小,500px,1rem就会50px,10rem也是刚刚好就可以占据屏幕的宽度 (屏幕大小/5 尽量使 1rem ==100px 方便计算)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        #d1{
            width: 5rem;
            height: 5rem;
            background-color: silver;
        }
    </style>
</head>
<body>
    <div id="d1"></div>

    <script>

        window.onresize = function(){
            Rem()
        }

        function Rem(){
            var screenWidth = window.innerWidth;
            var danwei = screenWidth/10;//屏幕的宽度/设计稿占满全屏的宽度为多少rem
            var html =document.querySelector("html")
            html.style.fontSize = danwei + 'px';
        }

        Rem()
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页