css媒体查询失效该如何解决

发布时间：2023-07-21 11:00:40 所属栏目：教程来源：互联网

导读： 　　这篇文章主要介绍了css媒体查询失效如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css媒体查询失效如何解决文章都会有所收获，下面我们一起来

　　这篇文章主要介绍了css媒体查询失效如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css媒体查询失效如何解决文章都会有所收获，下面我们一起来看看吧。

　　css媒体查询失效的解决办法：1、修改语法如“@media screen and (max-width:768px){...}”；2、在html头文件添加必要的meta标签；3、将媒体查询语句放在原css文档后面即可。

　　CSS @media媒体查询无效

　　用@media媒体查询写的CSS样式无效？

　　1.问题

　　用@media媒体查询写的CSS样式对html无效。

　　2.解决

　　尝试一：语法规范——‘and’ 和 ‘(’ 之间需要一个空格

　　@media screen and (max-width:768px){

　　    body {

　　       padding-top:150px;

　　    padding-bottom: 20px;

　　    }

　　}

　　尝试二：环境——保证html头文件添加了必要的meta标签

　　<!DOCTYPE html>

　　<html>

　　 <head>

　　    <meta charset="utf-8">

　　    <meta http-equiv="X-UA-Compatible" content="IE=edge">

　　    <meta name="viewport" content="width=device-width, initial-scale=1">

　　    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

　　    <link rel="stylesheet" type="text/css" href="css/index.css">

　　 </head>

　　尝试三：优先级——将媒体查询语句放在原css文档后面

　　body{

　　   padding-top:50px;

　　   padding-bottom:20px;

　　}

　　@media screen and (max-width:768px){

　　    body {

　　       padding-top:150px;

　　    padding-bottom: 20px;

　　    }

　　}

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!