Question

所以我有一个独特的网站，我有一个画廊，用户可以点击图像，然后看到他们点击的内容，规格和一些信息模糊的更多照片。但是，我正在我的11英寸笔记本电脑上进行编码，但是当我在1440p屏幕上检查它时看起来很糟糕，所以我通过媒体查询解决了这个问题，但我不确定这是否是让它看起来正确的最好方法在所有屏幕尺寸上。我之前使用过媒体查询来让网站在移动设备上看起来不错，而且耗时但不是问题，我更乐意这样做，但我想我会检查以确保它是最好的方式。

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

这是我的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

我不确定这里的问题究竟是什么，但我明白你的担心是在同一台计算机上测试不同屏幕尺寸的网站吗？

现在有网站提供该功能，如果您在谷歌上搜索

this和this只需输入您的网址网址即可。

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

此外还有一个chrome扩展程序，测试网站响应能力令人惊讶，但我忘了名字。您可以在Google中搜索该扩展程序并进行安装。

希望它有所帮助。

Answer 2

我发现构建自适应网站的最佳方法是首先创建移动设备样式表。然后使用媒体查询和桌面屏幕样式。您可以为单个查询使用多个查询，甚至多个条件。但是，我发现只使用一个大于640px的屏幕大小的查询才是最简单的方法。一般来说，页面应该在该尺寸以下的所有屏幕上都能很好地显示，而不会过于扭曲或压扁。

这是我经常提到的一个不错的article on media queries。

希望有所帮助。

在所有屏幕上使我的网站“响应”

2 个答案: