响应式web设计-第三章拥抱流式布局

最新推荐文章于 2023-02-20 14:16:47 发布

宝拉不想努力了

最新推荐文章于 2023-02-20 14:16:47 发布

阅读量724

点赞数

分类专栏： css 书籍学习笔记

本文链接：https://blog.csdn.net/weixin_41056807/article/details/83043277

版权

书籍学习笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

25 篇文章 1 订阅

订阅专栏

理解为什么响应式设计需要百分比布局
将元素的固定像素宽度转换为百分比宽度
将文字的固定像素大小转换为等量的相对尺寸
理解如何找到任意元素的上下文
学习如何使图片平滑缩放
学习如何为不同的大小的屏幕提供不同的图片
学习如何让媒体查询与弹性图片及流式布局协同工作
使用css网络系统从头创建一个响应式布局

一.固定布局经不起未来考验

二.为什么响应式设计需要百分比布局

固定像素布局转百分比布局，让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。

三.将网页从固定布局修改为百分比布局

1.公式——将固定像素宽度转换为对应的百分比宽度
目标元素宽度÷上下文元素宽度=百分比宽度
2.设置百分比元素的上下文（内容区，侧栏区，页脚）

#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /*  最外层 DIV */
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 ÷ 960 头部*/
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 97.916667%; /* 940 ÷ 960 导航栏*/
}
#navigation ul li {
display: inline-block;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 72.7083333%; /* 698 ÷ 960 左边内容*/
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 22.7083333%; /* 218 ÷ 960 右边侧栏*/
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 97.9166667%; /* 940 ÷ 960 */
}
#navigation 和 #footer 的宽度也是基于像素的，我们使用相同的方法将它们转换为百分比

4.数学——黄金分割率，对于对应的百分比值如1.0416667%这样的不要四舍五入更好
5.简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrapper {
            margin-right: auto;
            margin-left: auto;
            width: 96%; /*  最外层 DIV */
        }
        #header {
            margin-right: 10px;
            margin-left: 10px;
            width: 97.9166667%; /* 940 ÷ 960 头部*/
        }
        #navigation {
            padding-bottom: 25px;
            margin-left: -1.0416667%; /* 10 ÷ 960 */
            padding-right: 1.0416667%; /* 10 ÷ 960 */
            padding-left: 1.0416667%; /* 10 ÷ 960 */
            width: 97.916667%; /* 940 ÷ 960 导航栏*/
            background-repeat: repeat-x;
            background-image: url(img/rBoxBg.png);
            border-bottom-color: #bfbfbf;
            border-bottom-style: double;
            border-bottom-width: 4px;
        }
        #navigation ul li {
            display: inline-block;
        }
        #navigation ul li a {
            height: 42px;
            line-height: 42px;
            margin-right: 2.6595745%; /* 25 ÷ 940 */
            text-decoration: none;
            text-transform: uppercase;
            font-family: Arial, "Lucida Grande", Verdana, sans-se;
            font-size: 27px;
            color: black;
        }
        #content {
            margin-top: 58px;
            margin-right: 10px;
            float: right;
            width: 72.7083333%; /* 698 ÷ 960 左边内容*/
        }
        #sidebar {
            border-right-color: #e8e8e8;
            border-right-style: solid;
            border-right-width: 2px;
            margin-top: 58px;
            margin-right: 10px;
            margin-left: 10px;
            float: left;
            width: 22.7083333%; /* 218 ÷ 960 右边侧栏*/
        }
        #footer {
            float: left;
            margin-top: 20px;
            margin-right: 10px;
            margin-left: 10px;
            clear: both;
            width: 97.9166667%; /* 940 ÷ 960 */
        }
        .ml{
            margin-left: 20%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- the header and navigation -->
        <div id="header">
            <div id="navigation">
                <ul>
                    <li><a href="#" >navigation1</a></li>
                    <li><a href="#" class="ml">navigation2</a></li>
                </ul>
            </div>
        </div>
        <!-- the sidebar -->
        <div id="sidebar">
            <p>here is the sidebar</p>
        </div>
        <!-- the content -->
        <div id="content">
            <p>here is the content</p>
        </div>
        <!-- the footer -->
        <div id="footer">
            <p>Here is the footer</p>
        </div>
    </div>
</body>
</html>

6.上下文

<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</div>
#navigation ul li { display: inline-block; }

a标签中的li就是外边距的上下文元素。li中的css没有设置宽度
解决方案：①给li设置一个宽度值（准确的），这个值必须是一个固定像素或使一个相对其包裹元素（#navigation）的百分比值，但是这两种都没法保证li中的文字灵活可变。
②#navigation ul li {display: inline;}这样最好。可以阻止li渲染为块级元素。
更改：

#navigation ul li {
display: inline-block;
margin-right: 2.6595745%; /* 25 ÷ 940 */
}
#navigation ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}

四.用em替换px

为了文字缩放
1.文字都会受body 上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改 body 的文字大小，其他所有文字也会相应变大
2.浏览器默认文字大小16px
所以不加任何文字大小他都是默认的
font-size: 100%;=font-size: 16px;=font-size: 1em;
3例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
         h1 {
            font-family: Arial, Helvetica, Verdana, sans-serif;
            text-transform: uppercase;
            font-size: 4.3125em; } /* 69 ÷ 16 */
         h1 span {
            display: block;
            line-height: 1.052631579em; /* 40 ÷ 38 */
            color: #757474;
            font-size: .550724638em; /* 38 ÷ 69 */
        }
    </style>
</head>
<body>
    <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
</body>
</html>

6.em定义：是一个测量单位，特定字母的宽度和高度相对于特定字体磅值的比例

五.弹性图片

1.在现代浏览器（包括 IE 7+）中要实现图片随着流动布局相应缩放非常简单。只需在 CSS中作如下声明：
img {max-width: 100%;}
这样就可以使图片自动缩放到与其容器 100%匹配

可以将同样的样式应用到其他多媒体标签上。img,object,video,embed {max-width: 100%;}
2.让图片随视口缩放

<!-- the sidebar -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run"  /></a>
<a href="#"><img src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div
//使用 max-width: 100%给图片这个属性。

注意不要给图片再固定像素，否侧max-width会失效
3.为特定图片指定特定规则
给img添加class就可以特定

img {max-width: 100%;}
.sideBlock img {max-width: 45%;}
<img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" />

4.给弹性图片设置阈（yu\）值
如果图片的像素是100.随视口增大，图片会被拉大超过宽度100,。这是出现阈值来控制宽度

.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 202 ÷ 698 */
max-width: 202px;//阈值，保证图片自有缩放又不会超出max-width设置的最大上限
}

5.全能的max-width属性
另一种限制页面无限制扩张的方法是给最外层#wrapper div设置max-width属性

#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;//页面缩放至视口宽度的96%，但不会超过1414px
}

六.为不同的屏幕尺寸提供不同的图片

1.设置自适应图片
2.建站Adaptive Images，下载zip文件开始配置（ adaptive-images.php 和 .htaccess 文件拷贝到网站的根目录）这里不详细说明

七.流动网格布局和媒体查询的默契配合

//如果导航链接在特定的视口宽度下会折成两行。
//我们可以使用媒体查询来修正这个问题。
//如果导航链接在 1060像素下散得太开而在 768像素下显示正常（我
们之前的媒体查询做好了处理）
//我们就给这个视口范围设置一下字体样式：
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}

八.css网格系统

下面是一些对响应式设计提供了不同程度支持的 CSS框架：
 Semantic (http://semantic.gs)；
 Skeleton (http://getskeleton.com)；
 Less Framework (http://lessframework.com)；
 1140 CSS Grid (http://cssgrid.net)；
 Columnal (http://www.columnal.com)。

宝拉不想努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式web设计-第三章拥抱流式布局

理解为什么响应式设计需要百分比布局将元素的固定像素宽度转换为百分比宽度将文字的固定像素大小转换为等量的相对尺寸理解如何找到任意元素的上下文学习如何使图片平滑缩放学习如何为不同的大小的屏幕提供不同的图片学习如何让媒体查询与弹性图片及流式布局协同工作使用css网络系统从头创建一个响应式布局一.固定布局经不起未来考验二.为什么响应式设计需要百分比布局...
复制链接

扫一扫