用媒体查询根据不同屏幕尺寸变化背景颜色

最新推荐文章于 2022-11-14 02:32:18 发布
最新推荐文章于 2022-11-14 02:32:18 发布
阅读量676 收藏
点赞数
分类专栏： web移动端前端 文章标签： html 蓝桥杯 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/122243087
版权

实现思路

1、按照从大到小或者从小到大的思路。

2、注意我们有最大值max-width和最小值min-width都是包含等于的。

3、当屏幕小于540像素，背景颜色变为蓝色（x<539）

4、当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色（540=<x<=969）

5、当屏幕大于等于970像素的时候，背景颜色为红色（x>=970）

快乐de馒头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用媒体查询显示不同屏幕宽度下的不同页面效果
weixin_48047636的博客
04-21 604
CSS <style> /* 100*100蓝色圆形 */ /* 在媒体查询里面写样式，只有符合媒体查询的条件之后才执行媒体查询里面的样式 */ @media (min-width:600px) and (max-width:900px) { body{ background-color: red; } div{
【响应式Web设计】读书笔记 - 媒体查询 - 2
JasonAPoint的博客
04-25 344
【简介】CSS3 规范分成很多模块，媒体查询（3级）只是其中一个模块。利用媒体查询，可以根据设备的特性应用特定的CSS样式。比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。
移动web学习笔记
十万嬉皮伊文
08-19 141
移动web学习笔记
38. 适配布局
potato123232的博客
07-21 1943
之后你在定义元素宽高的时候都使用rem作为单位，比如你在原型图上看到了一个宽150px，高200px的盒子，那么你给的时候就应该给width3(150/50)rem，height4(200/50)rem。如果这里你没有使用less，也不想用计算器一个一个算，那么你可以使用vscode中的插件cssrem，这个插件在你写px的时候，会自动帮你转换成rem，使用方式在这里有介绍。好处是使用rem为单位，我们只需要修改html的字体大小，就可以改变所有元素的大小，而且是等比例改变。.........
媒体查询-背景图自适应
weixin_44817062的博客
07-19 760
媒体查询-背景图自适应 技巧：当某部分需要加图片时，最好将其作为背景图，比直接加在页面更便于操作 一、页面组件 <template> <div class="newEnter"> <div class="newEnter-box"> <div class="zhaobiao-img" @click="goZhaobiao()"> </div> <div class="qiye-img" @cli
移动WEB开发03-媒体查询案例修改背景颜色.html
04-14
移动WEB开发
CSS3中媒体查询结合rem布局适配手机屏幕
11-21
css3语法: （750px设计图的1rem = 100px） @media only screen and (min-width: 320px) and (max-width: 479px){ ... font-size: 42.67px !important; } } @media only screen and (min-width: 480px) and (max-width...
全面解析CSS Media媒体查询使用操作（推荐）
09-27
主要介绍了CSS Media媒体查询,通过不同的媒介类型和浏览器兼容,媒体查询中宽高比,语法,逻辑操作等详细介绍了开发中需要使用媒体查询来平衡布局的代码操作,需要的朋友可以参考下
详解关于使用媒体查询@meda失效原因的总结
09-22
主要介绍了详解关于使用媒体查询@meda失效原因的总结的相关资料，对@meda失效原因做个小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用媒体查询根据尺寸设置不同背景色
qq_42931285的博客
03-29 907
媒体查询使用
CSS3 媒体查询
m0_67401417的博客
08-01 3393
CSS3媒体查询（MediaQuery）语法的特性①使用@media查询，可以针对不同的媒体类型定义不同的样式；②@media可以针对不同的屏幕尺寸设置不同的样式；③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询....
web移动端复习下（49th）
山雀的博客
11-14 1562
rem布局，媒体查询，less相关知识，swiper插件，蓝湖，vw/vh，码云部署
媒体查询。
qq_42158469的博客
07-01 594
案例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
在html中如何让div转换颜色,如何更改HTML中的工具提示（div的标题）背景颜色
weixin_33700809的博客
05-30 517
你不能风格默认提示，但你可以使用data-attributes与使用content:attr(data-attribute);.tooltip{padding:20px 0;}.tooltip div {font: 10px sans-serif;background-color: blue;text-align: right;padding: 3px;margin: 1px;color: whi...
多媒体查询
mwsblue的博客
09-28 137
多媒体查询
媒体查询案例修改背景颜色
weixin_42378409的博客
04-08 576
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html媒体查询，同一个网页，在不同的条件下，使用不同的样式。
xh0112的博客
12-24 657
媒体查询简述 设备： 屏幕：PC 手机端 打印机 屏幕阅读器 尺寸： 常见尺寸 320-420之间 响应式网页：同一个网页，在不同的条件下，使用不同的样式。 rem/百分比：等比例缩放。 【注】 使用min-width时，通常将小的条件放在前面。 使用max-width时，通常将大的条件放在前面。 实现方式： 内嵌式 格式：@media 设备名 逻辑关键词（and , not）（条件）{ 样式； } 外链式: 通过link标签引入样式，再通过media属性设置样式引用的条件。 < link
html中div背景颜色渐变(透明 对角 附赠颜色查询对照表)
existent
06-02 6636
效果图 源码 <style> #grad1 { height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } </style> <div id="grad1"> </div> 使用角度: 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to r
CSS媒体查询（含案例）
qi_bai_jin的博客
10-06 5101
随着移动应用不断发展，为了适配不同屏幕尺寸需要不同的css样式，这就需要媒体查询实现响应式布局，给用户一个良好的体验，本文介绍了媒体查询的基本使用。
用 css 给它设置一些页面效果
最新发布
09-14
5. 响应式布局：使用CSS的媒体查询功能可以实现响应式布局，使网页可以根据不同设备的屏幕尺寸自动调整布局和样式，以便在不同设备上呈现最佳效果。 总结而言，CSS提供了丰富的样式属性和功能，可以为网页添加各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值