Question

我为我的朋友建了一个原型网页，对他来说重要的一件事就是它在多个不同设备上的外观。我已经使用bootstrap来对页面的某些方面进行垂直折叠，但是当你正在查看的屏幕较小时，我不知道如何让其他东西看起来正确。

我不知道你怎么会开始这样做...你是否在javascript中写了一个if if语句，当浏览器达到设定的宽度时，它会说明加载具有不同位置，边距，填充等的某些缩小图像X像素数量？我至少可以说是业余网络开发人员，虽然我不希望或希望你们握住我的手或为我做这些......我只是想要一个良好的起点如何去做。

这是我的代码：

HTML：

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
 <link type="text/css" rel="stylesheet" href="style.css">
 <link type="text/css" rel="stylesheet" href="slick/slick.css">
 </head>
 <body>
 <main id="mainContent" role="main">
 <article role="article">
 <section>
 <header>
  <div class="container">
    <div class="single-item-rtl" dir="rtl">
        <div><img src="img/4.jpeg"></div>
        <div><img src="img/3.jpeg"></div>
        <div><img src="img/1.jpeg"></div>
        <div><img src="img/2.jpeg"></div>
    </div>
    <div id="logo"><img src="img/SJ_WHT.png" height="170px"    width="220x" align="center" /></div>
        <div id="text-top-carousel">
            <h1>a better way to book creative spaces</h1>
        </div>
</div>
</header>
</section>
<section class="container-fluid additional">
<div class="row">
    <div class="col-md-4">
        <div class="info">
            <div class="icon icon1"></div>
                <h2>unique spaces <br> that inspire</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut                                 labore etdolore magna aliqua</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info">
            <div class="icon icon2"></div>
                <h2>hassle free <br> booking</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et                        dolore magna aliqua</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info">
            <div class="icon icon3"></div>
                <h2>share your <br>creative space</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et                        dolore magna aliqua</p>
        </div>
    </div>
</div>
<div class="motto">
    <h1>unleash your creativity</h1>
    <p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is                              limited when the necessary resources are not available to execute your vision. <br></nr> We want to                          ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm" class="container-fluid">
<div class="row">
    <div class="form col-md-6">
        <h3>Want to list a <br>studio space?</h3>
        <p>We are looking for more studios. <br>
           Send us your information<br> so we can connect.</p>
        <form>
            <input type="text" name="fullname" placeholder="Full Name">
                <select>
                    <option selected="selected">Type of Studio</option>
                    <option value="photography">Photography</option>
                    <option value="audio">Recording/Music/Audio</option>
                    <option value="painting">Drawing/Painting</option>
                    <option value="pottery">Pottery</option>
                    <option value="other">Other</option>
                </select>
            <input type="text" name="studioname" placeholder="Studio Name">
                <div class="shortForms">
                    <input type="text" name="phone" placeholder="Phone">
                    <input type="text" name="email" placeholder="Email"><br>
                    <input type="submit" value= "Submit">
                 </div>
        </form>
    </div>
    <div class="form col-md-6">
        <h3>Need to rent a studio space?</h3>
        <p>We are working very hard to bring our vision to life. Studio Junkey will be ready soon...</p>
        <hr class="style-six" />
        <p>Enter your email address and we will notify you when we are ready to launch.</p>
            <div class="shortForms">
                <input type="text" name="email" placeholder="Email"><br>
                <input type="submit" value="Submit">
            </div>
    </div>
</div>
</section>
<footer role="footer">
<h3>Questions? Feel free to<a href="#">contact us</a>.</h3>
    <div class="subFooter">
        <p class="copyright">©2015 Studio Junkey</p>
        <p class="termsPrivacy"><a href="#">Terms</a><a href="#">Privacy</a></p>
    </div>
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.single-item-rtl').slick({
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
    });
});
</script>
</body>
</html>

CSS：

@font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}

html, body {
padding:0;
margin: 0;
}

body {
font-family:"Brandon Grotesque";
}

#mainContent {
background: white;
}

.container {
width: 100%;
height:600px;
text-align:center;
margin:auto;
padding:0;
}

.row {
margin: 0;
}

.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
}

#logo {
position:relative;
top:-595px;
left:0em;
}

#text-top-carousel h1 {
position:relative;
top:-575px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}

#info {
width:100%;
height:auto;
margin: 0px;
}

.info {
height:auto;
padding:20px 0;
background:white;
text-align: center;
color:#333333;
}

.info .icon {
width:150px;
height:135px;
padding:10px;
margin: 0 auto;
background-position:15px 0px;
background-size: 150px 150px;
background-repeat: no-repeat;
}

.info .icon1 {
background-image:url(img/icon%201.png);
}

.info .icon2 {
background-image:url(img/book122.png);
}

.info .icon3 {
background-image:url(img/icon%203.png);
}


.info h2 {
padding:20px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}

.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}

.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:100%;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}

.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}

.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}

#contactForm {
background: #EDEFED;
margin-top:0px;
width: 100%;
margin: 0 auto;
overflow: auto;
}

.form {
text-align: center;
margin: 0 auto;
color:#333333;
}

.form h3 {
margin: 0;
font-size: 40px;
line-height: 1em;
padding: 90px 185px 5px 185px;
}

.form p {
font-size: 24px;
padding:20px 150px;
margin:0;
}

input[type="text"] {
display: block;
margin: 0 auto;
margin-bottom: 10px;
width: 350px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}

input[type="submit"] {
-webkit-appearance: none;
display: block;
background: #EDEFED;
margin: 0 auto;
margin-bottom: 10px;
width: 350px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;

}

select {
-webkit-appearance: menulist-button;
display: block;
margin: 0 auto;
margin-bottom: 10px;
width: 355px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}

.shortForms input {
display: inline-block;
margin: 0 auto;
margin-bottom: 10px;
width: 175px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}

input[type="text"]:focus {
outline: none;
}

.style-six {
border: 0;
margin-top: 10px;
margin-bottom: 10px;
width:150px;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

footer h3 {
text-align: center;
}

footer h3 a {
display:inline-block;
color:#333333;
text-decoration: none;
}

footer h3 a:hover {
text-decoration: underline;
color:#333333;
}


.subFooter {
padding: 0 100px;
}

.copyright {
float: left;
}

.termsPrivacy {
float: right;
}

footer a {
display:inline-block;
margin-left: 5px;
color:#333333;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
color:#333333;
} 

.additional {
padding-left: 0;
padding-right: 0;
}

所以，就像，我正在尝试做的一个很好的例子是使转盘顶部的徽标和文本具有不同的大小并居中，当用户拥有较小的设备或较小的浏览器时窗口......或者在旋转木马下方的三列，它们被设置为在960px左右垂直坍塌，我还想为这三个东西带来填充，以使它看起来更好一些。我希望这不是一个问题，但是非常感谢！

Answer 1

您可以使用Media Queries。

当视口到达下方时，媒体查询将CSS应用于元素（或以上）一定的规模。

例如将其放在CSS文件的末尾

@media screen and (max-width: 320px) {
    .logoSlogan{
        font-size: 1 em;
    }
}

当视口宽度低于300px时，上面的代码段会将类.logoSlogan的字体大小更改为1em。

一般情况下，您应该尝试使用百分比，最大宽度和列尽可能智能，然后开始使用媒体查询，最后调整大小或重新定位元素。

Answer 2

FireFox插件“Web开发人员，响应式设计视图”对判断响应式设计有很大帮助。

谷歌Chrome的开发者工具为大多数流行的移动设备提供仿真模式。

在整个页面周围放置一个页面div，并设置页面的最大宽度，如60em（960px）和宽度：100％。
最大的用于台式机，所以事情不会太多。

设置视口

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

320px的宽度已过时。有关当前视口的列表，请参阅：
http://viewportsizes.com/

对于适用的宽度（例如列和框），使用最小宽度和百分比宽度。

首先针对移动设计，并使用W3C mobileOK和Google PageSpeed Insights进行测试

mobileOK的得分为90％非常好。 Google的见解100％很容易。

当您对设计和测试结果感到满意时，请使用屏幕高度和宽度的媒体查询来定位桌面。

这些是一些基本的可用查询：

@media only screen and (min-width : 1024px) {}
@media only screen and (min-width : 768px) and (max-width : 1023px) {}
@media only screen and (max-width : 767px) {}

Answer 3

您正在寻找的是自适应设计。响应式设计可以直接构建到CSS中，而且只需要很少的工作。基本上，您可以创建样式表的不同版本。例如，

@media screen {
/* Your css */
}
@media print {
/* Your css, adjusted for the new format */

主要是，您希望使用@media screen和更具体的选择器，例如@media screen and (min-width: 340px)。这些也是复合的，所以你最终可以使用@media screen and (min-width: 340px) and (max-width: 340px)之类的东西。

最简单的方法是在浏览器中使用开发人员工具。 Firefox和Chrome都内置了自适应设计工具。选择一个模板（就像你想设计的那样，iPhone 6）并为这个宽度范围创建自定义CSS。

您可以在此处详细了解此主题以及互动演示：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

此外，我想提出的另一个提示是在一个名为＆＃34; em＆＃34;的单位工作。＆＃34; EM＆＃34;除非您定义它，否则相对于当前字体大小或父元素。这将有助于您的渲染更好一些，并且对不同设备更友好。

Answer 4

您应该根据当前分辨率调查using srcset以加载不同的图像大小。对于您的徽标，您可以使用svg图像，具体取决于您要使用的徽标类型，或者只是在移动设备上使用媒体查询隐藏它。

如其他人所回答的那样，使用媒体查询可以最好地解决一般布局问题。

为手机，平板电脑等构建响应式网页

4 个答案: