屏幕HTML / CSS不会最小化文本

时间:2016-07-30 16:36:00

标签: html css text centering

我希望有人可以提供帮助!当我最小化此代码上的浏览器屏幕时,除了我的正文之外,一切都在适当地最小化。不知道为什么会这样!任何人都可以在HTML或CSS中找到问题吗?

HTML:

<!DOCTYPE html>
<!--
    Ex Machina by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
    <title>History: Skating Today</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->

    <script src=
    "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script src="js/skel.min.js">
    </script>
    <script src="js/skel-panels.min.js">
    </script>
    <script src="js/init.js">
    </script> <noscript>
    <link href="css/style.css" rel="stylesheet">
    <style type="text/css">
            .header {
    }
    </style></noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="page">
    <!-- Header -->
    <div id="page">
        <img alt="Black and white photo of boy skateboarding" height="" src=
        "images/OldTimey.jpg" width="100%">
        <div class="unit header">
            <section>
                <header>
                    <h3>Unit 1: Skateboarding, Then and Now<br>
                    Lesson 1/3</h3>
                </header>
            </section>
        </div><!-- Main -->
        <div class="container" id="main">
            <div class="row">
                <div class="3u">
                    <section class="sidebar">
                        <h4><a href="Index.html">Home</a></h4>
                    </section>
                    <section class="sidebar">
                        <h4><a href="Programme%20Overview.html">Programme
                        Overview</a></h4>
                    </section>
                    <section class="sidebar">
                        <h4><a href="Unit1.html">Unit 1: Skateboarding, Then
                        and Now</a></h4>
                        <ul class="style3">
                            <li><a href="History.html">Lesson 1: History of
                            Skateboarding</a></li>
                            <li><a href="Types.html">Lesson 2: Types of
                            Skating</a></li>
                            <li><a href="Quiz1.html">Unit 1 Quiz</a></li>
                        </ul>
                    </section>
                    <section class="sidebar">
                        <h4><a href="Unit2.html">Unit 2: Why You Should
                        Skate</a></h4>
                        <ul class="style3">
                            <li><a href="EmotionalBenefits.html">Lesson 1:
                            Emotional and Physical Benefits</a></li>
                            <li><a href="SocialBenefits.html">Lesson 2: Social
                            and Enviromental Benefits (Plus a Few
                            More!)</a></li>
                            <li><a href="Quiz2.html">Unit 2 Quiz</a></li>
                        </ul>
                    </section>
                    <section class="sidebar">
                        <h4><a href = "Unit3.html">Unit 3: Safety & Upkeep</a></h4>
                        <ul class="style3">
                            <li><a href="SafePlace.html">Lesson 1: Determining Safe Places
                            to Skate</a></li>
                            <li><a href="Stopping.html">Lesson 2: How to Stop a
                            Board</a></li>
                            <li><a href="Rules.html">Lesson 3: Rules of the
                            Road</a></li>
                            <li><a href="Bearings.html">Lesson 4: Changing Your Bearings</a></li>
                            <li><a href="Trucks.html">Lesson 5: Adjusting Your Trucks</a></li>
                        </ul>
                    </section>
                    <section class="sidebar">
                        <h4>Extras: Skating Routes & Meet a Skater</h4>
                        <ul class="style3">
                            <li><a href="#">From the Flag Poles</a></li>
                            <li><a href="#">From the White Gates</a></li>
                            <li><a href="#">From the Pavilion</a></li>
                            <li><a href="MeetandGreet.html">Meet a Skater</a></li>
                        </ul>
                    </section>
                </div>
               <div class= "9u skel-cell-important"">

                    <header>
                                <h3>Skating Today</h3>
                            </header>
                    <p> While some people may still see skaters as
                      rebellious or alternative, skateboarding has once
                      again evolved. In places like Afghanistan, where
                      girls are not allowed to ride bikes but can
                      skateboard, the sport is used to engage and empower
                      youth (skateistan.org). Furthermore, although many
                      skaters still take part in skateboarding to perfect
                      tricks and take risks, skateboarding has become the
                      way that many people get from point A to point B.</p>
<p></p>
                            <p>While any type of skateboard may be used for
                            transportation, the longboard is having its heyday.
                            A longboard can range anywhere from 33 to 80 inches
                            and typically has softer wheels, making for a
                            smoother and more stable ride, perfect for
                            cruising, less experienced, and older skaters
                            (Ruibal 2006).</p>
                            <img src="images/header.jpg" width="736" height="189" alt=""/><br>
                            <div id="course description">
                                <br>
                                <p>This lesson is now complete. To continue to lesson 2, "Types of Skating", click <a href=
                                "Types.html">next</a>.</p>
                            </div>
                        </div>
                    </section>
                </div><!-- Main -->
            </div>
        </div>
    </div>
</body>
</html>

CSS:

@charset  "UTF-8";

/*
    Ex Machina by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
body {
    background-image: url(../images/BackgroundImage.jpg);
}

body,input,textarea,select {
    font-family: Verdana,Geneva,sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5em;
}


h1,h2,h3,h4,h5,h6 {
    letter-spacing: 1px;
    font-weight: 300;
    color: #1b1b5e;
}

h4 
{
    letter-spacing: 1px;
    font-weight: 700;
    color: #1b1b5e;

}

/* Change this to whatever font weight/color pairing is most suitable */
strong,b {
    font-weight: 700;
    color: #000;
}

em,i {
    font-style: italic;
}

/* Don't forget to set this to something that matches the design */
a {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

sub {
    position: relative;
    top: .5em;
    font-size: .8em;
}

sup {
    position: relative;
    top: -.5em;
    font-size: .8em;
}

hr {
    border: 0;
    border-top: solid 1px #ddd;
}

blockquote {
    border-left: solid .5em #ddd;
    padding: 1em 0 1em 2em;
    font-style: italic;
}

p,ul,ol,dl,table {
    margin-right: ;
    margin-bottom: 1em;
    color: #1b1b5e;
}
tr. highlight td {
    padding: 2em;
}

header {
    margin-bottom: .5em;
    line-height: 2.5em;
    color: #1b1b5e;
}

header h2 {
    font-size: 24px;
    text-align: left;
}

header h3 {
    font-size: 22px;
}


footer {
    margin-top: 1em;
}


/* Sections/Articles */


section,article {
    margin-bottom: 1em;
}

.row
{
    padding: 0;
    position; center;
}


.intro {
    text-align: left;
    padding-bottom: 2em;
    font-weight: 700;
}

.aims {
    padding-top: 2px;
}

.unit header {
    text-align: right;
    margin-right: 1em;
    color: purple;
}

table,th,td {
    border: ;
    border-collapse: collapse;
    align-content: center;
}

th,td {
    padding: 5px;
}

.boxed {
    border: 1px solid #000;
    padding: 2%;
    margin-right: 10%;
    margin-bottom: 2em;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

.formativequiz {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: ;
    text-align: left;
}

.formativequiz h1 {
    font: bold;
}

.formativequiz p {
    font: bold;
}

.question {
    overflow: auto;
    margin: ;
    width: 80%;
    background: #fff;
}

.question h2 {
    float: left;
    margin: 0 40px;
    color: blue;
    font: bold;
}

.question h2:hover {
    color: #333;
    cursor: pointer;
}

.question p {
    float: left;
    margin-right: 0;
    color: #fff;
    font: bold 0;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

h2:active ~ .yes {
    color: #1b1b5e;
    font-size: ;
}

.course description {
    margin-bottom: 3em;
    padding-right: 10%;
}

#icons {
    height: 128;
    text-align: justify;
    border: none;
    font-size: .1px;
/* IE 9 & 10 don't like font-size: 0; */
    max-width: 888px;
}

#icons div {

    display: inline-block;
    margin-top: 3em;
    margin-bottom: 3em;
    padding-right: 10%;

}

#icons:after {
    content: '';
    width: 100%;
/* Ensures there are at least 2 lines of text, so justification works */
    display: inline-block;
}

/* Images */
.image {
    display: block;
    margin: 2em;
}

.image img {
    display: block ;
    width: ;
    margin: 2em;
    padding: 2em;
}

.image.featured {
    display: block;
    width: 100%;
    margin: 0;
}

.image.full {
    display: block;
    width: 100%;
    margin-bottom: 2em;
}

.image.left {
    float: left;
    margin: 0 2em .8em 0;
}

.image.centered {
    display: block;
    margin: 0 0 .8em;
}

.image.centered img {
    margin: 0 auto;
    width: auto;
}



/* Lists */

ul.default {
    margin-bottom: 0;
    padding-bottom: 0;
    list-style: none;
}

ul.default li {
    display: block;
    padding: 2em 0 1.25em;
    border-top: 1px solid #303030;
}

ul.default li:first-child {
    padding-top: 0;
    border-top: none;
}

ul.default a {
    text-decoration: none;
    color: rgba(255,255,255,.5);
}

ul.default a:hover {
}

ul.style1 {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.style1 li {
    padding: .6em 0;
}

ul.style1 li:first-child {
    padding-top: 0;
    border-top: 0;
}

ul.style1 img {
}

ul.style2 {
    text-align: left;
    margin-right: 10%;
    padding: 2%;
    list-style: disc;
    padding-bottom: 1em;
}

ul.style2 li {
    padding: .5em 0 0;
    list-style-position: inside;
}

ul.style2 li:first-child {
    padding-top: 0;
    border-top: 0;
}

ul.style3 {
    margin: 0;
    padding: 5px;
    list-style: none;
    font: 14px;
}

ul.style3 li {
    padding-left: .6em;
    line-height: 150%;
}

ul.style3 li:first-child {
    padding-top: 0;
    border-top: 0;
}

ul.style5 {
    overflow: hidden;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

ul.style5 li {
    float: left;
    padding: .25em;
    line-height: 0;
}

ul.style5 a {
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/



/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/
#page {
    margin: 7em;
    position: center;
    background: #fff;
}

#main {
    padding: 1em;
}

#container {
    position: center;
    margin: 1em;
    padding: 1em;
}



/*********************************************************************************/
/* Icons                                                                         */
/*********************************************************************************/


.greenleaf {
    align-content: relative;
}

.trafficlight {
    align-content: relative;
}

.pinkskater {
}

.map {
}

2 个答案:

答案 0 :(得分:1)

向CSS添加媒体查询,以定义各种窗口大小的字体大小。这是this post(用Sass编写)的简单示例:

html {
  font-size: 16px;

  @media (min-width: 800px) {
    font-size: 18px;
  }

  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

答案 1 :(得分:0)

问题似乎是在你的css中设置了body的字体大小(以像素为单位)。尝试将其更改为em而不是px,它应该调整大小。但是很难说这么多事情。