网站自适应设计问题
[英]Issue with website responsive design
问题描述
我正在尝试使用引导程序创建一个响应式网站，并且使我的“关于”部分不超过给定区域（深灰色）时遇到麻烦，这是一个示例，其中说明了当浏览器缩小时的大小，以及缩小或查看时英雄的字体的大小手机上的图片与图片的表面重叠，但是我不确定该怎么做。
body, html { height: 100%; font-size: 100%; } .cd-fixed-bg { font-family: 'Open Sans', sans-serif; min-height: 100%; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center; } .cd-scrolling-bg { min-height: 60%; } .cd-fixed-bg.cd-bg-1 { background-image: url("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg"); } .cd-scrolling-bg.cd-color-1 { height: 60%; background-color: #212121; color: #fff; } .cd-intro { color: #212121; position: absolute; top: 40%; bottom: auto; right: auto; padding-left: 15%; text-align: left; max-height: 70%; } .cd-intro-dec-1 { font-weight: 300; font-size: 48px; } .cd-intro-dec-2 { font-weight: 400; font-size: 72px; } .cd-content-format { font-family: 'Open Sans', sans-serif; } .header-about { font-weight: 300; font-size: 60px; } .about-sub { font-weight: 700; font-size: 18px; } .about-content { font-weight: 400; } .about-img-adjust { padding-top: 20px; padding-bottom: 10px; } .about-quote { font-weight: 300; font-style: italic; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tribute Page</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <div class="cd-fixed-bg cd-bg-1"> <div class="cd-intro"> <h1 class="cd-intro-dec-1">a tribute to</h1> <h2 class="cd-intro-dec-2">Steve Jobs</h2> </div> </div> <div class="cd-scrolling-bg cd-color-1"> <div class="container cd-content-format"> <div class="row"> <div class="col-xs-6 col-md-4"> <img src="http://i.imgur.com/w39VG2S.jpg" class="about-img-adjust img-responsive" alt="Steve Jobs"> <blockquote class="blockquote about-quote">"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote> </div> <div class="col-xs-12 col-md-8"> <h1 class="header-about">about</h1> <p class="about-sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, saepe voluptate sit. Quasi rem minima veritatis beatae voluptate, temporibus modi quisquam adipisci repellendus nostrum, culpa sapiente fugiat aliquid, sunt deleniti.</p> <p class="about-content">Architecto repudiandae eaque voluptatibus rem voluptatum veritatis debitis cumque repellat doloribus molestias, officiis soluta quo vitae esse minus quisquam est deleniti porro quia consequatur. Ad libero voluptatibus provident maiores quaerat?</p> <p class="about-content">Enim eaque mollitia perferendis nesciunt voluptates, aut voluptatum illo ad, accusantium officia iusto ipsam natus totam deleniti cupiditate nihil culpa quibusdam laudantium soluta molestias! Facilis doloremque odio iste dolores provident!</p> <p class="about-content">Eum a rerum hic, sequi assumenda nostrum facere sit atque, delectus porro quibusdam doloribus dolore? Excepturi alias consequatur minus ipsam, natus voluptatem sunt temporibus eligendi eos expedita. Mollitia magni, ex?</p> <p class="about-content">Reiciendis, incidunt exercitationem, voluptatum quasi atque, aspernatur beatae, sed a voluptatem praesentium amet quisquam itaque nemo impedit accusamus minus ducimus laboriosam omnis saepe? Libero repellat quam nobis, aperiam at saepe.</p> <p class="about-content">Minus facere optio veritatis aliquid temporibus quidem voluptatem asperiores rerum? Alias earum dignissimos, tenetur, aspernatur saepe ullam sapiente sint cupiditate cum voluptates vitae natus magnam, repudiandae perspiciatis ea! Et, molestias.</p> </div> </div> </div> </div> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
我不确定自己在做什么错，有人可以帮我找到解决方案吗？ 我在这里设置了演示： http : //codepen.io/kazera/pen/KNrXxB
谢谢！
1 个解决方案
解决方案1
2 2016-12-15 10:09:53
你这里有错
<div class="col-xs-12 col-md-8">
更改为
<div class="col-xs-6 col-md-8">
响应式网站设计不再响应式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.