响应式布局@media写移动端适配时，ChromeF12开发者工具发现样式被划掉了

最新推荐文章于 2023-04-22 12:54:17 发布
最新推荐文章于 2023-04-22 12:54:17 发布
阅读量1.3k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/85339085
版权

如题，需求需要将PC和Mobile放到一套代码里去实现，我选择了用响应式布局（即媒体查询技术）实现适配，但是在响应式布局@media写移动端适配时，ChromeF12开发者工具发现样式被划掉了？？？why？？？

经过仔细观察，发现是由于less的样式层级写的不够详细导致的，因为我们知道，css的样式名写的越详细，权重就越高

hzxOnlineOk
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
f12 CSS网页调试_css样式被划了黑线怎么办
老段的CSDN的博客
08-03 1200
class加上去了,但是样式不生效,此时可能是样式被其他样式覆盖了,解决方案就是 给颜色后边添加一个。
为什么在浏览器中写的一些样式会被画上删除线
sinat_35030910的博客
11-01 7647
背景 在写CSS样式的时候，发现我们写的CSS样式在浏览器并没有实现，打开开发者工具查看元素发现我们写的CSS样式上有一条删除线 可能的原因 1.该样式的写法已经被摒弃，但是浏览器一般还是会显示出你写的样式 2.你写的样式被相同的样式给覆盖了(可能是后面的样式，也可能是前面的样式) 具体分析其中一种情况 CSS中的！important 关键字 如果一
@media解决前端移动设备不兼容问题
jinxi1112的博客
09-25 1578
所有 iPad Media Queries @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  {  /* STYLES */ } iPad 横屏 @media only screen and (min-device-width : 768px)  and
Chrome 开发工具的设备模式开发响应式 Web 应用
weixin_33744141的博客
06-09 360
我们在桌面和移动设备上开发网站，通常我们倾向于最初的桌面体验。 但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验，我们需要准确地知道网站在移动设备上的效果。 不久前，Chrome 开发者工具包里加入了手机模拟器特性，但是它不能连接真实的设备，还需要很多试验和调试。 Chrome38 Beta版包含一个新的设备模式：一次点击...
Chrome DevTools
java_hzh的博客
06-18 732
Chrome DevTools 是一组直接内置于 Google Chrome 浏览器中的 Web 开发人员工具。
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
- 在线工具和转换器可以帮助开发者快速计算和测试不同设备上的响应式布局效果。 总的来说，CSS3的vw和rem单位为移动设备提供了不依赖JavaScript的响应式布局解决方案。结合媒体查询、Flexbox和Grid等其他技术，...
基于rem的移动端响应式适配方案(详解)
01-19
于是，打算重新写一篇文章，介绍移动端视口的相关概念。 关于这篇文章说到的所有知识，本质上离不开以下代码 <meta name=viewport content=width=device-width, initial-scala=1, maximum-scale=1, minimum-...
移动端适配 rem & vw 计算工具
12-29
在实践中，开发者可能结合使用媒体查询（Media Queries）、Flexbox或Grid布局，配合`rem`和`vw`，实现更为精细的适配策略。例如，使用媒体查询在不同屏幕尺寸下设置不同的html font-size，再结合`rem`调整内部元素...
h5响应式适配移动端网站模板
06-06
1. **响应式设计原理**：响应式设计的核心理念是“流式布局”，通过CSS3的媒体查询（Media Queries）来定义不同屏幕尺寸下的样式规则。这种设计方法确保网站在桌面、平板和手机等不同设备上都能呈现出最佳的视觉效果...
前端基础-CSS网页调试
逍遥云恋
03-30 939
网页调试（重点） 开发者工具对于开发者来说特别重要，只要你开发你就离不开它。一定要学会使用 作用：调试代码 检测代码的！！ 在网页中点击右键，选择（审查元素/查看元素/检查）或者按F12，在右侧或下面会打开一个窗口，窗口最左边是查看html的结构，network是查看网页的http请求加载，console是控制台，查看网页中打印的信息，也可以自己写调试代码，source中是网页的所有资源。 在结构...
Vue修改element.style的属性,让前端的展示恢复
游戏人生__假的
04-22 835
学习vue技术过程中总结的一些小问题学习
className修改样式，不起作用
YW博客
09-06 1524
想要做的是在js里面修改标签的类名，从而达到修改样式的目的。 然后到浏览器F12,发现的确把标签名改了，但是标签里的样式被划掉了， 出现这种问题，才回想起以前老师讲过的权重问题。 第一个的权重没有第二个高，所以当样式冲突的时候，选择了第一个的背景颜色。 解决，增加权重 意外发现，浏览器里面默认是权重高的样式在前面，这为以后的检查提供了方便 ...
CSS 被横线划掉的样式
热门推荐
qq_36935391的博客
11-29 1万+
text-decoration: line-through
Android：开发中，代码被横线划掉是什么意思
bangju6522的博客
04-15 5465
　　在学习【状态栏通知】时，遇到代码被横线划掉，这是怎么回事呢？ 例如： package com.example.notification; import android.app.Activity; import android.app.AlertDialog; import android.app.Notification; import android.app....
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
怎么实现响应式布局，适配移动端与pc端
07-14
实现响应式布局可以通过使用CSS媒体查询来适配移动端和PC端。下面是一种常用的实现方式： 1. 使用Viewport meta标签：在页面的`<head>`标签中添加`<meta name="viewport" content="width=device-width, initial-scale=1.0">`，这会告诉浏览器使用设备的宽度作为视口宽度，同时禁用缩放。 2. 使用CSS媒体查询：媒体查询允许我们根据设备的特征（如屏幕宽度）应用不同的CSS样式。可以在CSS文件中使用@media规则来定义不同的布局和样式。 例如，下面的代码示例将在屏幕宽度小于等于768px时应用一种样式，而在大于768px时应用另一种样式： ```css /* 小于等于768px */ @media (max-width: 768px) { /* 移动端样式 */ } /* 大于768px */ @media (min-width: 769px) { /* PC端样式 */ } ``` 在媒体查询中，你可以指定不同的CSS属性和值来适应不同的布局需求。例如，可以修改元素的宽度、高度、字体大小等属性。 3. 弹性布局和网格系统：使用弹性盒子布局（Flexbox）和CSS网格布局（CSS Grid）可以更方便地创建响应式布局。这些布局技术可以让你以弹性的方式定义页面的结构和排列方式，适应不同的屏幕尺寸。 弹性盒子布局示例： ```css .container { display: flex; flex-wrap: wrap; } .item { flex: 1 0 200px; } ``` CSS网格布局示例： ```css .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .item { grid-column: span 1; } ``` 以上是实现响应式布局的一些常用方法，可以根据具体需求选择合适的方式来适配移动端和PC端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值