Jquery 制作我的网站；“响应性”；在所有屏幕上

所以我有一个独特的网站，在那里我有一个图库，用户可以点击图片，然后看到更多他们点击的图片，规格，还有一些信息简介。然而，我正在我的11英寸笔记本电脑上对它进行编码，但当我在1440p屏幕上查看它时，它看起来很糟糕，所以我通过媒体查询解决了这个问题，但我不确定这是否是让它在所有屏幕尺寸上都能正常显示的最佳方法。我以前使用媒体查询让网站在手机上看起来不错，这很耗时，但这不是问题所在，我非常乐意这样做，但我想我会检查以确保这是最好的方式

因此，我的网站和其他一些页面在不同的屏幕上不是很“响应”，但我关心的主要页面是，然后当你点击第一个页面时，它会带你去，在不同的屏幕上看起来不太好。幸运的是，我只需要修改一个.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>

---

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

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

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

只需输入您的网站url和您的good to go

但我强烈建议您使用开发工具如果您使用的是chrome，只需按f12键，然后按开发工具右上角设置旁边的show drawer图标，弹出窗口然后在下拉框中选择要测试的屏幕大小

还有一个chrome扩展，它在测试网站响应性方面非常出色，但我忘了它的名字。你可以在谷歌搜索这个扩展并安装它

---

希望能有所帮助。

我发现构建响应性网站的最佳方法是首先为手机创建样式表。然后对桌面屏幕使用媒体查询和样式。可以对单个查询使用多个查询，甚至可以使用多个条件。然而，我发现对大于640px的屏幕大小只使用一个查询是easiet方法。一般来说，页面应该在低于该尺寸的所有屏幕上都能很好地显示，而不会太扭曲或挤压

这是我经常提到的一个像样的例子

---

希望这能有所帮助。

与问题无关，但可能与您有关：请修正您的口号：“Darthvix定制光剑将根据您的需要和需求打造您的个人光剑！”。如果你不检查自己的标语拼写，可能会有很多人质疑你的工作质量。对不起，一旦代码最终确定，所有内容都将进行语法检查，谢谢你，现在将进行更改！我主要关心的不是测试，而是让网站在从iphone、galaxy s到ipad、平板电脑和电脑的不同屏幕上看起来“像样”。使用媒体查询的最佳方式是什么？如果不是，您推荐什么？测试我可以使用模拟器或者Chrome开发工具。媒体查询也是基于屏幕分辨率或像素的，因为大多数手机的分辨率都是1080或更高。是的，您可以使用媒体查询来实现网站响应，但如果您熟悉

引导

或

基础

，则响应性将不是您的问题。它们将处理网站的响应能力，因为它们首先是为移动而构建的。它们是css框架，易于使用和理解，因为有很好的文档。嗯，我会看一看，所以无论我的div名称是什么，它仍然可以工作，还有#的图片，等等，这都是令人惊叹的嗯，我正在看这两个，你认为我可以把它添加到我的网站吗？还是我必须从头开始？抱歉这里迟了，但是@特里：是的，你可以把它添加到你现有的网站上，但是你必须调整你的CSS，或者从Bootstrap或基础上覆盖那些取决于你在不同的SunsSistRead中看到的你明天想要的标准。来晚了。你们能看看我的网站，看看到目前为止你们对响应性的看法吗？

.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%;
}
}