问媒体查询/响应网页
EN

Stack Overflow用户

提问于 2020-04-30 21:06:34

回答 1查看 43关注 0票数 0

我正在尝试用我的网站做一个响应式的网页：https://chunzg.github.io/about.html

我已经为图片和文本做了一个弹性容器。

我已经使用下面的媒体查询在我的笔记本电脑屏幕上进行了第一次测试：

@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 600px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

但它不起作用--什么都没有改变。如果我在一个狭窄的屏幕上看，我希望侧边栏，照片和文本被垂直堆叠在彼此的顶部。

我知道我一定是做错了什么，但只是没有足够的经验知道需要改变什么

谢谢

html

css

Stack Overflow用户

发布于 2020-04-30 21:34:48

嘿，我是在引用：https://www.w3schools.com/css/css3_mediaqueries_ex.asp我不能理解确切的问题，但我认为应该是这样的：

/* On screens that are 992px wide or less, go from four columns to two columns */
    @media screen and (max-width: 600px) {
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

在我的代码中，如果屏幕尺寸小于或等于600，我的脚本会让网页宽度改变100。(也许它对你的ipad或小型设备的屏幕很有用)

还有，为什么你同时使用min和max呢？

请注意，我不是专业的，但我有一些css的经验，所以我的答案可能不是解决方案。但是让我们试试这个。

票数 2

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61524116

复制

相似问题

问媒体查询/响应网页
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询/响应网页EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询/响应网页
EN