为 phone、平板电脑等构建响应式网页
Building responsive webpages for phone, tablets, etc
我为我的朋友构建了一个原型网页，对他来说很重要的一件事是它在多种不同设备上的外观。我已经使用 bootstrap 对页面的某些方面进行垂直折叠，但我不知道如何在您查看它的屏幕较小时让其他内容看起来正确。
我不知道你是怎么开始做这个的...你是否在 javascript 中写了一个 if then 语句来加载某些按比例缩小的具有不同位置、边距、填充等的图像浏览器达到设定的 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;
}
所以，我正在尝试做的一个很好的例子是使轮播顶部的徽标和文本具有不同的大小并居中，并且当用户使用较小的设备或较小的浏览器 window...或者旋转木马正下方的三列，它们被设置为垂直折叠在 960px 左右，我还想稍微为这三样东西添加填充，使它看起来好一点。我希望这不是一个太宽泛的问题，但在此先感谢您！
您可以使用 Media Queries。
A media query applies CSS to elements when the viewport gets below (or
above) a certain size.
例如将其放在 CSS 文件的末尾
@media screen and (max-width: 320px) {
.logoSlogan{
font-size: 1 em;
}
}
当视口宽度低于 300px 时，上面的代码片段将 class .logoSlogan 的字体大小更改为 1em。
通常，在开始使用媒体查询作为调整元素大小或重新定位元素的最后手段之前，您应该尝试并尽可能智能地使用百分比、最大宽度和列。
您应该研究 using srcset 以根据当前分辨率加载不同的图像尺寸。对于您的徽标，您可以使用 svg 图像，具体取决于您要使用的徽标类型，或者只是在移动设备上使用媒体查询隐藏它。
一般的布局问题最好使用媒体查询来解决，正如其他人所回答的那样。
您正在寻找的是响应式设计。响应式设计可以直接内置到您的 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 都内置了响应式设计工具。Select 一个模板（比如你想要设计的 iPhone 6）并创建自定义 CSS对于那个宽度范围。
您可以在此处阅读有关此主题的更多信息以及交互式演示：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
另外，我想给的另一个提示是在一个叫做"em"的单位工作。 "Em" 是相对于当前字体大小或父元素的，除非你定义它。这将帮助您的渲染效果更好一点，并且对不同的设备更友好。
FireFox插件"Web Developer, Responsive Design View"对判断响应式设计有很大帮助。
并且 Google Chrome 的开发人员工具具有适用于大多数流行移动设备的仿真模式。
在整个页面周围放置一个页面 div 并设置页面的最大宽度，例如 60em (960px) 和 width:100%。
max with 是为台式机设计的，所以事情不会被拉得太长。
设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
320 像素的宽度已过时。有关当前视口的列表，请参阅：
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) {}
我为我的朋友构建了一个原型网页，对他来说很重要的一件事是它在多种不同设备上的外观。我已经使用 bootstrap 对页面的某些方面进行垂直折叠，但我不知道如何在您查看它的屏幕较小时让其他内容看起来正确。
我不知道你是怎么开始做这个的...你是否在 javascript 中写了一个 if then 语句来加载某些按比例缩小的具有不同位置、边距、填充等的图像浏览器达到设定的 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;
}
所以，我正在尝试做的一个很好的例子是使轮播顶部的徽标和文本具有不同的大小并居中，并且当用户使用较小的设备或较小的浏览器 window...或者旋转木马正下方的三列，它们被设置为垂直折叠在 960px 左右，我还想稍微为这三样东西添加填充，使它看起来好一点。我希望这不是一个太宽泛的问题，但在此先感谢您！
您可以使用 Media Queries。
A media query applies CSS to elements when the viewport gets below (or above) a certain size.
例如将其放在 CSS 文件的末尾
@media screen and (max-width: 320px) {
.logoSlogan{
font-size: 1 em;
}
}
当视口宽度低于 300px 时，上面的代码片段将 class .logoSlogan 的字体大小更改为 1em。
通常，在开始使用媒体查询作为调整元素大小或重新定位元素的最后手段之前，您应该尝试并尽可能智能地使用百分比、最大宽度和列。
您应该研究 using srcset 以根据当前分辨率加载不同的图像尺寸。对于您的徽标，您可以使用 svg 图像，具体取决于您要使用的徽标类型，或者只是在移动设备上使用媒体查询隐藏它。
一般的布局问题最好使用媒体查询来解决，正如其他人所回答的那样。
您正在寻找的是响应式设计。响应式设计可以直接内置到您的 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 都内置了响应式设计工具。Select 一个模板（比如你想要设计的 iPhone 6）并创建自定义 CSS对于那个宽度范围。
您可以在此处阅读有关此主题的更多信息以及交互式演示：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
另外，我想给的另一个提示是在一个叫做"em"的单位工作。 "Em" 是相对于当前字体大小或父元素的，除非你定义它。这将帮助您的渲染效果更好一点，并且对不同的设备更友好。
FireFox插件"Web Developer, Responsive Design View"对判断响应式设计有很大帮助。
并且 Google Chrome 的开发人员工具具有适用于大多数流行移动设备的仿真模式。
在整个页面周围放置一个页面 div 并设置页面的最大宽度，例如 60em (960px) 和 width:100%。
max with 是为台式机设计的，所以事情不会被拉得太长。
设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
320 像素的宽度已过时。有关当前视口的列表，请参阅：
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) {}