CSS_像素&视口&媒体查询（响应式布局）

电玩女神 2023-10-06 17:00 26阅读 0赞

## 像素 ##

像素:
    -屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
    -分辨率: 1920 x 1080说的就是屏幕中小点的数量
    -在前端开发中像素要分成两种情况讨论: CSS像素 和物理像素
    -物理像素，上述所说的小点点就属于物理像素
    -css像素，编写网页时，我们所用像素都是css像素
    	-浏览器在显示网页时，需要将Css像素转换为物理像素然后再呈现
    	-一个css像素最终由几个物理像素显示，由浏览器决定:
    	-默认情况下在pc端，一个css像素等于一个物理像素

## 手机像素 ##

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
    	24寸1920x1080
    	i6 4.7寸750 x 1334
    	智能手机的像素点远远小于计算机的像素点
    	
    问题:一个宽度为900px的网页在iphone6中要如何显示呢?
    -默认情况下，移动端的网页都会将视口设置为980像素(css像素 )，以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页
    
    https://material.io/resources/devices/
    
    所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验
    
    为了解决这个问题，需要为移动端专门设置网页

## 视口 ##

视口(viewport) 
    视口就是屏幕中用来显示网页的区域
    可以通过查看视口的大小，来观察cSsS像素和物理像素的比值
    默认情况下:
    	视口宽度1920px (CSS像素)
    	1920px (物理像素)
    	此时，css像素和物理像素的比是1:1
    放大两倍的情况:
    	视口宽度960px (CSS像素)
    	1920px (物理像素)
    	此时，css像素 和物理像素的比是1:2
    -我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

## 完美视口 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
          
                margin: 0;
                padding: 0;
            }
            
            box1 {
          
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        
        <div class="box1"></div>
    </body>
    
    </html>

## vm ##

（在移动端开发时，就不能再使用px来进行布局了）  
vw表示的是视口的宽度(viewport width)  
100vw =一个视口的宽度  
1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
          
                margin: 0;
                padding: 0;
            }
            
            .box1 {
          
                width: 100vw;
                height: 100px;
                background-color: #bfa;
            }
        </style>
    </head>
    
    <body>
        
    
        <div class="box1">
            aa
        </div>
    </body>
    
    </html>

### vm适配 ###

网页中字体大小最小是12px,不能设置一个比12像素还小的字体
    如果我们设置了一个小于12px的字体，则字体自动设置为12

## 媒体查询 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /*
        使用媒体查询
            语法: @media 查询规则{}
                媒体类型:
                    all所有设备
                    print打印设备
                    screen带屏幕设备
                    speech屏幕阅读器
                    -可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
                可以在媒体类型前添加一个only,表示只有。
                    only的使用主要是为了兼容一些老版本浏 览器
        */
            /* @media print,screen {
            body{
                background-color: #bfa;
            }
        } */
            @media only print {
          
                body {
          
                    background-color: #bfa;
                }
            }
        </style>
    </head>
    
    <body>
        
    
    </body>
    
    </html>

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    		/* 媒体特性：
                width：视口的宽度
                height视口的高度
    
                min-width视口的最小宽度(视口大于指定宽度时生效)
                max-width视口的最大宽度(视口小于指定宽度时生效)*/
                
            /* @media (max-width: 500px) {
                body {
                    background-color: #bfa;
                } */
                
            /*  样式切换的分界点称为断点
            一般使用的断点
    
            小于768超小屏幕max-width= 768px 
            大于768小屏幕min-width=768px 
            大于992中型屏幕min-width=992px 
            大于1200 大屏幕min-width=1200px */
            /* ,逗号表示或则 */
            
            @media (min-width: 500px),
            (max-width: 700px) {
          
                body {
          
                    background-color: #bfa;
                }
                /* and表示且 */
                @media (min-width: 500px) and (max-width: 700px) {
          
                    body {
          
                        background-color: #bfa;
                    }
                    /* only */
                    @media only screen and (min-width: 500px),
                    (max-width: 700px) {
          
                        body {
          
                            background-color: #bfa;
                        }
                        /* not 除了 */
                        @media not screen and (min-width: 500px),
                        (max-width: 700px) {
          
                            body {
          
                                background-color: #bfa;
                            }
        </style>
    </head>
    
    <body>
        <div class="box1"></div>
    </body>
    
    </html>