小编ivi*_*yon的帖子

我写了一段CSS代码,根据用户的屏幕宽度流畅地切换我的网站布局的宽度.如果用户可用的屏幕空间较少,则布局的宽度会增加以填充更多的窗口并留下更少的空白,如果它们有更多空间,则布局会缩小以保持吸引人的外观.

我使用以下代码来实现此目的:

#bg{
    background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1.6rem;
    border-width:0 0.1rem 0.1rem 0.1rem;
    border-style:solid;
    border-color:#303030 #101010 #000;
    border-radius:0.8rem;
    min-width:94.2rem
}

@media (min-width: 70rem){
    #bg{
        border-radius:4px;
        border-radius:0.4rem;
        width:90%
    }

}

@media (min-width: 91rem){
    #bg{
        width:80%
    }

}

@media (min-width: 112rem){
    #bg{
        width:70%
    }

}

这在Firefox 30中运行得很好,但Google Chrome 总是以70%的宽度显示元素.

以前,我在查询中也使用了max-width,在这种情况下Chrome会做相反的事情; 无论我调整浏览器窗口的大小,它总是会以90%显示元素.

规则使用SASS编译.究竟是什么问题？如何更改查询以在所有浏览器中工作？

可以在此链接中找到受影响的网站.

我想在我的网站正文中部署一个背景图像,该图像按窗口分辨率缩小,但不会超出其原始大小(1920x1080).这样,具有较小分辨率的用户仍然可以看到整个图像,但是那些之外的用户没有丑陋的升级背景.

它看起来不像背景图像支持像max-width这样的属性,我通常会将其用于此类目的.

解决方案可以是什么？没有额外的脚本,这在CSS中是否可行？

我有一个特殊的设置:在Windows 10主机上,我有一个运行Ubuntu VirtualBox的客户机.我使用带有X11转发的SSH终端直接从guest虚拟机启动PhpStorm并将其显示在我的主机上.我的网络服务器也在虚拟机上,我可以通过虚拟主机从我的主机浏览器访问它,比如说http://local.dev.

这个设置运行得相当不错,允许我跳过将我的服务器文件复制到主机,用基于主机的PhpStorm编辑它们.但是,我很难让XDebug在主机的浏览器上运行.

我设法调试的唯一方法是?XDEBUG_SESSION_START在我从主机浏览器启动的URL末尾添加,但这仅适用于立即执行的代码中的断点,而不是AJAX调用,因为我在获取后面的PhpStorm消息页面已加载:

16:53:02调试会话已完成而未暂停可能是由路径映射配置错误或未同步的本地和远程项目引起的.

如何在VM上设置XDebug以允许从主机浏览器进行调试？我已经尝试过映射路径,但似乎毫无意义,因为PhpStorm和XDebug文件不在远程主机上.