关于@media (min-width: )响应问题，已经快36小时没睡了，跪求高手解决

最新推荐文章于 2024-07-10 14:25:23 发布
最新推荐文章于 2024-07-10 14:25:23 发布
阅读量362 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48808420/article/details/106930679
版权
博主遇到@media (min-width:)响应式布局的问题，导致36小时未眠，寻求CSS高手帮助。文中展示了相关CSS代码，包括不同屏幕宽度下的样式处理，但具体的@media规则未定义完全。
摘要由CSDN通过智能技术生成

关于@media (min-width: )响应问题，已经快36小时没睡了，跪求高手解决。

`

麻烦高手接招了

*{box-sizing: border-box;}
.center{width:1280px;margin:0 auto;}
#content{width:1280px;margin:0 auto;}
.projectd{width:100%;border:1px solid #dbdbdb;background:#f9fbe9;}
.projectd h2{line-height:40px;font-size:16px;font-weight:normal;text-align:center;}
.box_listd{width:100%;overflow:hidden;}
.box_listd li{width:15%;min-width:110.4;max-weight:241px;padding:5px;margin:10px;border:1px solid #dbdbdb;float:left;background:#fff;}
.box_listd li:last-child{margin-right:0;}
.box_listd li img{width:94%;margin:3%;}
.box_listd li h3{line-height:20px;font-size:14px;font-weight:normal;margin-bottom:10px;overflow:hidden;white-space:nowrap;text-align:center;}
.box_listd li:hover{display:block;transform:scale(1.03);transition:all 0.5s;box-shadow:4px 4px 4px #ccc;}

@media (min-width:480px) and (max-width:767px) { {

最低0.47元/天 解锁文章
A_烂拖鞋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于@media (min-width: )响应问题，已经快36小时没睡了，跪求高手解决
weixin_48808420的博客
06-23 304
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title>麻烦高手接招了</...
媒体查询——>@media screen and (min-width: 768px)
qq_39579242的博客
08-28 1万+
响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式 参考数据标准： 当屏幕宽度&gt;1200px（超大PC显示器-lg）：    容器宽1170px 当屏幕宽度&gt;992px（普通PC显示器-md）:    容器宽970px 当屏幕宽度&gt;768px（平板显示器-sm）:        容器宽750px 当屏幕...
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
热门推荐
叶兴胜
10-10 2万+
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法 原文   http://blog.qiji.tech/archives/10167 主题 CSS 前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 ani
运用@media实现网页自适应中的几个关键分辨率
最新发布
qq_42049677的博客
07-10 305
运用@media实现网页自适应中的几个关键分辨率
Bootstrap中CSS媒体查询分辨率 @media（min-width）例子
阿酷tony
10-26 512
Bootstrap中CSS媒体查询分辨率 @media（min-width）例子
Bootstrap 中CSS媒体查询分辨率 @media（min-width）
阿酷tony
10-26 805
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
bootstrap的@media (min-width: 768px)
lzf的博客
06-28 1万+
在bootstrap.css中，经常出现 @media (min-width: ...px) 样式名{ ..... } 这表示只有浏览器的屏幕宽度达到min-width时，下面的样式才会执行。 比如导航栏的navbar-left、navbar-right @media (min-width: 768px) .navbar-left {
【前端响应式】媒体查询（@media）
qq_34838046的博客
09-13 1317
功能：根据不同的页面属性（主要是宽度）设置不同的样式 基本用法 /*1.屏幕宽度在300px以上的样式*/ @media screen and (min-width:300px){ } /*2.屏幕宽度在600px以下的样式*/ @media screen and (max-width:600px){ } /*3.屏幕宽度在300px以上,600px以下的样式*/ @media screen and (min-width:300px) and (max-width:600px){ } 含义 (min
@media 屏幕适配常用尺寸
Beryl2580的博客
03-16 4786
1. 常见pc端屏幕尺寸如下，红色为常见分辨率尺寸： 分辨率 比例 设备尺寸 1024*500 8.9寸 1024*768 4：3 10.4寸、12.1寸、14.1寸、15寸 1280*800 16：10 15.4寸 1280*1024 5：4 14.1寸、15.0寸 1280*854 ...
vue实现PC端分辨率适配
lwg112233的博客
12-16 1455
简单的几步~~~ 这里讲二种方式：1.借助插件实现，2.利用css3媒体查询实现 方法一：下载两个插件 1.安装lib-flexible和px2rem-loader 两个插件 npm i lib-flexible -S //生成 npm i px2rem-loader -D //开发 2.在项目的入口文件 main.js 里引入 lib-flexible // main.js import 'lib-flexible' 3.找到文件 node_...
@media only screen 手机端适配判断
Pre_wen
09-30 8306
  做好屏幕自适应，一般只需要注意iPhone5，x，plus,等问题，注意使用absolute，relative /*iphone 6,7,8plus screen-width:414px */ @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ra...
响应式布局 @media screen and (min-width: 960px)
weixin_30483495的博客
07-13 689
@media screen and (min-width: 960px){ .heading, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, ...
CSS3的media的用法
hu_xinxin的专栏
07-23 589
购物商城触屏版 *{ margin: 0; padding: 0; } .container { width: 960; margin: auto; } .wrapper { width: 740px; float: left; } #Main { width: 520px; float
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6239
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
@media 各大尺寸
weixin_30376453的博客
08-09 1005
@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } @media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960p...
CSS3 @media同时对宽度width和高度height判断
hello world
01-23 4589
定义 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 使用 如果需要同时对宽度width和高度height判断， 可以使用and操作符。 下面代码判断的是高度小于500px并且宽度大于600px @media screen and (max-height: 500px) and ...
@media的用法总结
leoly612200的博客
08-02 2123
顺序不能反 @media (max-width: 767px)  { ... col-xs-3... }  { //&lt;=767的设备 }  手机 @media (min-width: 768px)  { ... col-sm-3... }  { //&gt;=768的设备 }  平板 @media (min-width: 992px)  { ... col-md-3...}   { //&g...
@media screen and (min-width: 1000px) 什么意思
06-10
@media是CSS中的一个规则，用于指定在不同的媒体设备和不同的屏幕尺寸下应用不同的样式。其中，screen表示样式仅适用于屏幕媒体，而(min-width: 1000px)则表示当屏幕宽度不小于1000像素时，应用该样式。 换句话说，以上这行CSS代码表示只有当屏幕宽度不小于1000像素时，才会应用该规则中定义的样式。这在响应式设计中非常常见，因为我们需要根据不同的屏幕尺寸来适配不同的布局和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值