CSS3媒体查询+手机自适应

谁借莪１个温暖的怀抱￠ 2022-04-04 07:00 547阅读 0赞

# 媒体查询 #

媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。

媒体查询的条件写法，可以从小到大，也可以从大到小，也可以区间取值。

媒体查询的写法：@ media all/screen and (最小值/最大值/区间值)，all/screen表示所有屏幕尺寸，包括投影仪、打印机、手机、电脑等。

媒体查询的引入方式有两种：内嵌式和外联式。

### 内嵌式 ###

<style>
            .block{
                height: 2000px;
                border: 1px solid red;
                margin: 0 auto;
            }
    
    由小到大的区间取值写法：
    
            @media all and (min-width: 768px) and (max-width: 1024px) {
                .block{
                    width: 680px;
                    background-color: yellow;
                }
            }
            @media all and (min-width: 1024px) and (max-width: 1380px) {
                .block{
                    width: 1024px;
                    background-color: blue;
                }
            }
            @media all and (min-width: 1580px) {
                .block{
                    width: 1190px;
                    background-color: red;
                }
            }
    
    由小到大的写法：
    
            @media all and (min-width: 768px) {
                .block{
                    width: 680px;
                    background-color: yellow;
                }
            }
            @media all and (min-width: 1024px) {
                .block{
                    width: 768px;
                    background-color: blue;
                }
            }
            @media all and (min-width: 1580px) {
                .block{
                    width: 1190px;
                    background-color: red;
                }
            }*/
    
    由大到小的写法：
    
            @media all and (max-width: 1580px) {
                .block{
                    width: 1190px;
                    background-color: red;
                }
            }
    
            @media all and (max-width: 1024px) {
                .block{
                    width: 768px;
                    background-color: blue;
                }
            }
    
            @media all and (max-width: 768px) {
                .block{
                    width: 680px;
                    background-color: yellow;
                }
            }
    
        </style>
    </head>
    <body>
    <div class="block">
    
    </div>
    </body>

###  外联式 ###

<title></title>
        <link rel="stylesheet" media="all and (min-width:320px) and (max-width:767px)" href="320.css">
        <link rel="stylesheet" media="all and (min-width:768px) and (max-width:1023px)" href="768.css">
        <link rel="stylesheet" media="all and (min-width:1024px)" href="1024.css">
    </head>

## 手机自适应 ##

它的作用是覆盖默认的画布（网页）缩放设置，用viewport meta表示，也就是在hear部分再加一个<meta>值，一个网页里面可以有多个<meta>.写法如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

其中：name="viewport"表示这个meta的属性是“视口”的意思

content="width=device-width表示适可的宽度（浏览器页面的宽度等于设备宽度 ）

initial-scale=1.0表示伸缩比例为1:0（即将页面放大一倍）

minimum-scale=1.0,maximum-scale=1.0表示最小放大比例为1和最大放大比例为1（即将页面最大放大至设备宽度1倍，最小压缩至设备宽度的一倍）

user-scalable=no其中 user-scalable表示用户适可缩放，那整个意思表示禁止用户缩放

### 强制性兼容： ###

<meta http-equire="X-UA-Compatible" content="IE=edge,chrome=1">

### 不同浏览器兼容样式： ###

\-ms- IE浏览器（+ \* \_表示不同版本IE浏览器）

\-moz-火狐

\-webkit-谷歌

<style>
            *{
                width: 100px;
                +width:100px;
                *width:100px;
                _width:100px;
    
                border-radius: 10px;
                -ms-border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
        </style>

css hank 是不同版本IE浏览器的兼容：

只在IE下生效：

只在IE6下生效：

只在IE6以上版本生效：

只在IE6上不生效：

非IE浏览器生效：

正常情况下，在缩放网页宽度时会出现滚动条，要想不出现滚动条就需要对网页写入媒体查询。一般用来检测手机媒体查询的页面宽度为320px。

### 像素几种常用的表示： ###

px,固定的单位值，开发人员常用；

rem,1rem=16px,默认比例，会随着页面margin，padding像素px的设置变化比例；

em，单位    相对于根节点的比例值；

vmax，100个单位划分的比例值；

%，相对于父元素的比例值。

发表评论取消回复

表情：

评论列表（有 0 条评论，547人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3--移动端自适应

CSS单位 CSS中，单位分为两类： 1. **绝对单位**：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的； 2. **相对单位**：没有固定的...

偏执的太偏执、/ 2024年04月18日 23:15/ 0 赞/ 120 阅读

相关 CSS3 @Media 媒体查询

CSS3 媒体类型 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr>

素颜马尾好姑娘i/ 2023年01月23日 14:51/ 0 赞/ 286 阅读

相关 css3媒体查询尺寸

转自：https://www.cnblogs.com/pangchunyu/p/11557487.html css3媒体查询尺寸 PC端按屏幕宽度大小排序（主流的用

短命女/ 2022年12月03日 09:14/ 0 赞/ 294 阅读

相关 CSS媒体查询

不同设备：用法： @media screen{ } 可选值：all 所有设备；screen 屏幕；print 打印机；speech 屏

小鱼儿/ 2022年09月04日 14:43/ 0 赞/ 340 阅读

相关 CSS3媒体查询

经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措，有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式，而是可以完全针对不同特性的设备编写不同

深碍√TFBOYSˉ_/ 2022年07月14日 12:50/ 0 赞/ 297 阅读

相关 CSS3的媒体查询@media

CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。语法： @media mediaT

╰+攻爆jí腚メ/ 2022年05月18日 09:19/ 0 赞/ 326 阅读

相关 css自适应手机，pc方案

这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制使用自适应方案的前提：替换原有的网站位置控制思维网址控制： 1. float /righ

傷城~/ 2022年05月12日 06:54/ 0 赞/ 277 阅读

相关 CSS3媒体查询+手机自适应

媒体查询媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。媒体查询的条件写法，可以从小到大，也可以从大到小，也可以

谁借莪１个温暖的怀抱￠/ 2022年04月04日 07:00/ 0 赞/ 548 阅读

相关媒体查询_屏幕自适应

1 /小屏PC/ 2 @media screen and (max-width:1600px) and (min-width:1367px) {}

淡淡的烟草味﹌/ 2021年12月21日 12:33/ 0 赞/ 374 阅读

相关 CSS媒体查询

\\\css3媒体查询 css3媒体查询是响应式方案核心 \\\媒体类型 all 所有媒体（默认值） screen 彩色屏幕 print 打印预览

蔚落/ 2021年10月24日 00:32/ 0 赞/ 405 阅读