jquery - 让我的网站在所有屏幕上显示为 "responsive"

Question

所以我有一个独特的网站，我有一个画廊，用户可以在其中单击图像，然后查看更多关于他们单击的内容的照片、规范和一些信息简介。但是，我在我的 11 英寸笔记本电脑上对其进行编码，但是当我在 1440p 屏幕上检查它时，它看起来很糟糕，所以我用媒体查询修复了它，但我不确定这是否是让它看起来正确的最佳方法在所有屏幕尺寸上。我以前使用媒体查询让网站在移动设备上看起来不错，这很耗时，但这不是问题，我很乐意这样做，但我想我会检查以确保它是最好的方法。

所以我的网站是http://darthvixcustomsabers.com/和其他一些页面在不同屏幕上不是很“敏感”，但我关心的主要是 http://darthvixcustomsabers.com/gallery.php然后当你点击第一个时，它会带你到 http://darthvixcustomsabers.com/corran.php在不同的屏幕上看起来不太好。幸运的是，我只需要修改一个 .css 文件，因为每个对象的所有照片细节页面都使用相同的脚本，只是照片/信息不同。

这是我的 html，下面是 css，我认为主要问题是照片的响应速度以及让信息简介根据屏幕尺寸进行调整。

谢谢大家

     <?php include 'header.php';?>
    <p id="service">Corran Horn </p>
    <div class="mainphoto"> <img src="images/corran/corran.jpg">
    <p class="saberinfo"> This is a saber from Rob at Genesis Custom Sabers that I bought off of a member at FX-Saber Forum. When It came it had a PC 1.5, however I too the entire saber apart; re-did the switches, changed the led to a 10W RGGB, installed a Color Extender to allow infinite blade colors, upgraded the PC1.5 to a CF7, installed a RGB accent so the crystal would match the main blade color, and installed a rice port adapter. These hilts are very rare, very few ever go on sale, so I was overjoyed to be the first person to upgrade one of Rob's Corran Horns with so many of Plecter Labs new features. </p>
        </div>
    <div class="services">
            Specifications
            </div>
        <ul class="servicelist">
    <li>Crystal Focus 7 +CEX</li>
        <li>10W RGGB</li>
            <li>1.5W Premium Speaker</li>
            <li>RGB Crystal Chamber (mimic main blade)</li>
            <li>3Segment Bargraph</li>
            <li>7.4V Battery</li>
            <li>1 Inch Blader Holder</li>
            <li>2.1mm Recharge Port</li>
        </ul>

    <section class="column2">
        <div class="image-container2">
                    <img src="images/corran/corran1.jpg">

        </div>
        <div class="image-container2">
                    <img src="images/corran/corran2.jpg">

        </div>
        <div class="image-container2">
                    <img src="images/corran/corran3.jpg">

        </div>
        </section>


    <?php include 'footer.php';?>

    </body>
    </html>

和CSS

.column2{
    width:90%;
    min-height:200px;
    margin:3%;
    margin-left:9%;
    padding-bottom:2%;
    margin-bottom:4%;
}

.image-container2{
    width: 32%;
    height: 230px;
    float: left;
    text-align:center;
}

.image-container2 img{
    max-height: 220px;
    width: 80%;
    border: 3px solid white;
    text-align:center;
}


div.mainphoto img {
    border: 3px solid white;
}

p.saberinfo {
    float:right;
    margin-right:2%;
    font-size:120%;
    width:35%;
    line-height: 120%;
}
@media screen and (device-aspect-ratio: 1280/720) {
p.saberinfo {
    margin-right:4%;
    font-size:125%;
    text-align:justify;
}

div.mainphoto img {
    margin-left:4%;
}

ul.servicelist {
    font-size:135%;
}

.image-container2 img{
    max-height: 250px;
    width: 80%;
    border: 3px solid white;
    text-align:center;
}

div.footer {
    margin-top:4%;
}

div.services {
    font-size:150%;
}
}
@media screen and (device-aspect-ratio: 2560/1440) {

p.saberinfo {
    margin-right:8%;
    font-size:175%;
    text-align:justify;
}

div.mainphoto img {
    margin-left:8%;
}

ul.servicelist {
    font-size:200%;
}

.image-container2 img{
    max-height: 320px;
    width: 80%;
    border: 3px solid white;
    text-align:center;
}

div.footer {
    margin-top:8%;
}

div.services {
    font-size:220%;
}
}

我也知道您可以使用最小和最大高度和宽度，但我认为我需要更多或混合使用？我没有足够的屏幕来正确测试它，但我会继续弄乱它并使用在线模拟器。

Answer 1

我不确定您的问题到底是什么，但据我所知，您关心的是在同一台计算机上测试您的网站的不同屏幕尺寸是吗？

现在有一些网站提供这种功能，如果你像在 google 上搜索

this和 this只需输入您的网站网址，一切顺利。

但我强烈建议您使用开发人员工具，如果您使用的是 chrome，只需按 f12 并按下开发人员工具右上角设置旁边的显示抽屉图标，弹出窗口然后在下拉框中选择屏幕尺寸你想测试。

还有一个 chrome 扩展，它在测试网站响应能力方面非常棒，但我忘记了名字。您可以在谷歌中搜索该扩展程序并安装它。

希望对您有所帮助。