我正在开发此响应式Wordpress网站:http://www.allisoncassels.com/Test/, 但我的媒体查询存在问题。
我为以下断点编码了CSS:
/* Portrait Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) /*Portrait Mobiles */
@media only screen and (max-width: 767px) /* Landscape Mobiles */
@media only screen and (min-width: 480px) and (max-width: 767px)
在台式机上, 一切看起来都很不错。在我的手机和平板电脑上, 有些东西可以移动, 有些东西仍然像台式机一样显示(我已显示的东西:没有显示, div宽度没有显示, 等等)
我唯一能弄清楚的是它与我的手机/平板电脑的视网膜显示有关, 但是我看不到其他站点必须将其计入他们的计算中…
现在真的很困惑, 我将不胜感激。谢谢
#1把它放在你的头上!!! :P
在meta标签内。
name =” viewport” content =” width = device-width, initial-scale = 1, maximum-scale = 1″ />
马克, 干杯
#2你应该添加此元
<
meta name="viewport" content="width=device-width, initial-scale=1">
尝试针对iPhone 6/6 Plus和Apple Watch CSS媒体查询进行此媒体查询
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6人像
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
iPhone 6 Plus风景
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
iPhone 6 Plus人像
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
和(-webkit-min-device-pixel-ratio:3){}
iPhone 6和6 Plus
@media only screen
and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px)
{ }
苹果手表
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
对于图像响应
img {max-width: 100%;
}
#3这个Wordpress主题Avando已经响应:
http://themefurnace.com/themes/?theme=Avando
你无需创建其他CSS
#4更新
昨晚我在工作时, 我的Web主机的服务器崩溃了, 我认为这正在影响文件的正确传播… 今天, 所有响应代码都可以正常运行。
#5【自适应网站只能在台式机上运行,??而不能在移动设备上运行】尝试在未正确显示的元素周围添加彩色CSS边框, 例如border:thin red solid; 或更改背景颜色以弄清楚是否正在使用css选择器。另外, 如果你插入页面链接并指出遇到问题的元素以及要测试的设备/设备浏览器, 这将很有用。
推荐阅读
- 解决WordPress子主题上与父主题的javascript冲突
- 向下滚动时调整菜单大小
- #私藏项目实操分享# 什么是 SAP HANA XS JavaScript
- netty系列之:让TCP连接快一点,再快一点
- 万字详解实时计算一致性机制(对比Flink和Spark)
- MySQL 8.0 配置mysql_native_password身份验证插件的password
- nginx location配置详细解释
- Filebeat相关的操作和配置
- 自动化测试markdown文章-标题