0
因此，我有一个博客标题（请参阅摘录），由三个词组成。当选项卡调整大小时，响应式设计将I从主文本移开（显然，这看起来很愚蠢）。基本上我希望无论页面大小如何，标题看起来都是相同的（例如，它看起来全尺寸 - 在整页中弹出片段并调整页面大小以查看我在说什么）。我怎样才能阻止回流，把我放在特殊的地方？使用响应式设计保护标题内容格式
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Raleway);
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Raleway';}
body #master_site_wrapper {
margin-top: 15px;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
div#masthead_wrapper {
display: inline-block;
color: #fff;
}
.masthead-content-wrapper {
background-image: url(http://i.imgur.com/fTPfBGX.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: right center;
height: 300px;
}
.destinations-section-wrapper {
width: 45%;
height: 0;
}
.masthead-content {
width: 75%;
margin: 0 auto;
}
/* Uses Flexbox to align text vertically */
.title-container {
width: 35%;
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
height: 300px;
z-index: 10;
}
h2.title {
font-family: 'Montserrat';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 70px!important;
font-weight:bold!important;
line-height: 0.9;
color: white;
}
h5.subtitle {
font-family: 'Raleway';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 40px!important;
color :white;
}
@media screen and (max-width: 850px) {
h2.title {
font-size: 2em !important;
}
h5.subtitle {
font-size:1.5em !important;
}
.content {
font-size:100% !important;
}
blockquote {
font-size:100% !important;
}
}
@media screen and (max-width: 1200px) {
.title-container {
width: 70% !important;
}
}
.pure-g-r [class *="pure-u"] {
font-family: 'Raleway';
}
.pure-g [class *="pure-u"] {
font-family: 'Raleway';
text-align: left;
}
/* Rounded avatars */
.avatar {
float: left;
margin-top: 1em;
margin-right: 1em;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}
.youtube {
float: none;
clear: both;
margin: auto;
\t position: relative;
padding-bottom:25px;
padding-top: 25px;
width: 80% !important;
}
.youtube iframe {
top: 0;
left: 0;
width: 100%;
}
a.reference.external {
\t color: #6633CC;
\t display: inline;
\t padding: 0;
}
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
font-family: Raleway;
font-size: 100%;
line-height: 1.5;
text-align: justify;
\t /*max-width: 900px;*/
\t font-size: 16px;
}
a {
color: #0A5693;
}
a:hover {
text-decoration: underline;
}
ul {
margin: 0.8em 1.5em;
}
li {
line-height: 1.5;
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway';
font-weight:bold;
color: #001;
line-height: 1;
}
h1 {
font-family:'Montserrat';
font-size: 300%;
\t text-align: left;
}
.h2, h2 {
font-size: 25px!important;
}
.h3, h3 {
font-size: 20px!important;
}
.table th, .table td { line-height: 1.3; }
/* Classes for Typographics Niceties */
.amp {
font-family: 'Gabriela', sans-serif;
color: #666;
/*font-style: italic;*/
}
.caps {
font-size: 0.92em;
font-variant: small-caps;
}
.day_suffix {
vertical-align: super;
font-size: 70%;
}
.smallprint {
font-size: 85%;
font-style: italic;
line-height: 1.25;
}
body {
line-height: 1.7em;
color: #7f8c8d;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #34495e;
}
.pure-img-responsive {
max-width: 1920px;
height: 50%;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.l-box {
padding: 1em;
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.is-center {
text-align: center;
}
p {
margin: .8em 0;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form label {
margin: 1em 0 0;
font-weight: bold;
font-size: 100%;
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
/* Fixed menus normally have a border at the bottom. */
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
}
.pure-menu .pure-menu-heading {
color: #565d64;
text-transform: uppercase;
font-size: 120%;
font-weight:bold;
}
.home-menu .pure-menu-heading {
color: white;
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background-image: url('/images/skullrr.jpg');
background-repeat: no-repeat;
\t z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 51%;
top: 0;
left: 0;
position: absolute;
background-size: cover;
}
.splash {
/* absolute center .splash within .splash-container */
padding-right:900px;
padding-left:50px;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-family: Montserrat;
font-size: 500%;
color: white;
text-align: left;
}
/* This is the subheading that appears on the blue section */
.splash-subhead {
font-family:Raleway;
\t text-align:left;
color: white;
\t font-size:300%;
\t font-weight:400;
letter-spacing: 0.05em;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
/* This is the class used for the main content headers (<h2>) */
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
}
/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
color: white;
}
/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
color: #1f8dd6;
}
.content-subhead i {
margin-right: 7px;
}
/* This is the class used for the dark-background areas. */
.ribbon {
background: #2d3e50;
color: #aaa;
}
/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
@media (min-width: 48em) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We want to give the content area some more padding */
.content {
padding: 1em;
}
/* We can align the menu header to the left, but float the
menu items to the right. */
.home-menu {
text-align: left;
}
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;
}
}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
[email protected] (max-width: 900px) {
/* We increase the header font size even more */
.splash-head {
font-size: 400%;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: rgb(142, 142, 214);
}
a:hover,
a:focus {
text-decoration: underline;
}
blockquote {
position: relative;
text-align: justify;
color: #707070;
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
}
blockquote p {
display: block;
}
.comments {
padding: 50px 0 0;
}
.banner {
background-position: center;
background-size: cover;
height: 300px;
width: 100%;
\t colour:red;
}
pre {
padding: 15px 15px 15px 15px;
font-size: 90%;
box-shadow: 2px 2px 2px #888;
}
.cover-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
-moz-box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
}
.cover-body {
position: absolute;
bottom: 0;
max-width: 100%;
padding-bottom: 0;
padding-top: 100px;
background-image: linear-gradient(to top,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%);
}
.brand-title,
.brand-tagline {
margin: 0;
}
.brand-title {
text-transform: uppercase;
}
.article-info {
padding-top: 15px;
clear: right;
font-weight: 300;
color: rgb(0, 0, 0);
word-wrap: break-word;
}
.article-avatar {
width: 120px;
height: 120px;
border-radius: 60px;
float: right;
margin-left: 1em;
border: 3px solid #fff;
z-index: 500;
background-color: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.about-author {
display: block;
width: 85%;
padding: 0 0px;
float: right;
margin-bottom: 35px;
}
hr {
border: 1px solid #f2f2f0;
width: 10%;
margin-top: 20px;
margin-right: 0px;
}
.header-article {
width: 767px;
max-width: 100%;
text-align: right;
padding-top: 4em;
}
.header-article h5 {
clear: both;
}
.header {
text-align: left;
width: 767px;
max-width: 100%;
}
.brand-main a {
text-transform: uppercase;
text-decoration: none;
margin-left: 15px;
font-size: 25px;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.3);
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
font-family: "freight-sans-pro","Myriad Pro","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
}
.tagline {
margin-left: 15px;
margin-top: -15px;
line-height: 15px;
font-size: 80%;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #fff;
}
.social {
display: inline-block;
}
.social a {
text-decoration: none;
margin-left: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #fff;
}
.links a {
font-size: 15px;
padding-left: 15px;
font-family: sans-serif;
letter-spacing: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-decoration: none;
color: #fff;
}
.content-subhead {
text-transform: uppercase;
color: #797979;
border-bottom: 4px solid #eee;
padding: 0.4em 0;
font-size: 80%;
font-weight: bold;
letter-spacing: 0.1em;
}
.content {
font-size: 110%;
font-weight: bold;
line-height: 1.45;
color: #333332;
margin-left: 25%;
margin-right: 25%;
background:white;
}
dd {
margin-left: 40px!important;
}
.post {
border-bottom: 5px solid #f2f2f0;
}
.post-title {
font-size:40px;
font-family:'Montserrat';
color: #34495e;
letter-spacing: -1px;
}
.post-meta {
color: #999;
margin-top: 10px;
}
.post-category {
margin: 0 0.1em;
padding: 0.2em 0.6em;
color: #fff;
background: #999;
font-size: 90%;
}
.archive-item {
padding: 10px 0;
border-bottom: 1px solid #f2f2f0;
}
.archive-date {
margin: 0;
}
.archive-post {
line-height: 130%;
}
.avatar {
/* float: right; */
margin-left: 200px;
margin-top: 50px;
width: 150px;
height: 150px;
}
.archive-meta {
color: #999;
font-size: 80%;
margin: -1px 0 0 0;
}
div.footer { border-top: 1px; padding-top: 9px;
font-size: 16px; color: #888;
text-align: center; }
div.footer a { color: #888; }
div.footer p { margin: 0; }
div.social { padding-top: 20px; padding-bottom: 10px;}
div.social a { color: #888; text-decoration: none;}
div.social ul { margin: 0; padding: 0; list-style: none; }
div.social ul li { display: inline; margin: 0 2px; padding: 0; }
.footer {
text-align: center;
padding: 2em 0;
font-size: 75%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
background: none;
}
.pagination-wrapper {
padding-top: 6px;
}
.pagination-left, .pagination-right {
position: absolute;
top: 0;
}
.pagination {
font-size: 120%;
text-align: center;
position: relative;
width: 900px;
margin: 0 auto;
max-width: 100%;
}
.pagination-left {
left: 0;
}
.pagination-right {
right: 0;
}
.go-top {
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.highlight pre {
font-size: 75%;
}
/* landscape */
/*@media handheld and (orientation:landscape) {*/
@media all and (max-device-width: 800px) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 80%;
height:60%;
}
.splash-head {
font-size: 200%;
}
.splash-subhead {
font-size: 200%;
}
.post-title {
font-size:120%;
}
.content {
font-size: 80%;
line-height: 1.45;
color: #333332;
margin-left: 5%;
margin-right: 5%;
background:white;
}
.pure-menu .pure-menu-heading {
color: #565d64;
text-transform: uppercase;
font-size: 65%;
}
.avatar {
float: right;
margin-left: 16px;
margin-top: 7px;
width: 50px;
height: 50px;
}
h1 {
font-size: 180%;
}
div.social {font-size: 20px!important}
div.pagination {font-size: 10px!important}
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<div id="master_site_wrapper">
<main role="main">
<div class="container-fluid no-padding">
<section class="no-padding" id="destination-masthead">
<div id="masthead_wrapper" class="col-xs-12">
<div class="masthead-content-wrapper">
<div class="destinations-section-wrapper green">
</div>
<div class="masthead-content">
<div class="title-container">
<h2 class="title">Something is Foxjump</h2>
<h5 class="subtitle">A Blog</h5>
</div>
</div>
</div>
</div>
好你'H2。 title {font-size：70px！重要; }'然后是'@media screen和（max-width：850px）h2.title {font-size：2em！important; }'那么文本的大小当然会改变。我想当你说你时，“不管页面大小如何，标题看起来都是一样的”，这实际上并不代表你的意思......你要改变字体大小但不要怪异地包装。 –