一:响应式Web设计
响应式 Web 设计是一种能自动响应不同尺寸设备的设计方法。
实现这一切的核心要素是:媒介查询(Media Query)。
如果你预计网站的大部分流量来自移动端,那么应该采取“移动端优先”的策略,再为PC端做兼容。
如果你预计网站的大部分流量来自PC端,那么应该采取“PC端优先”的策略,再为移动端做兼容。
1、媒体查询
媒体查询是 CSS3 中引入的一项新技术,它可以根据不同的可视窗口大小显示不同的布局。
@media (max-width: 100px) { /* CSS Rules / } :当设备宽度小于或等于100px时,返回内容;
@media (min-height: 350px) { / CSS Rules */ }:当设备高度大于或等于350px时,返回内容;
例1:
<style>
p {
font-size: 20px;
}
@media(max-height:800px){
//当设备高度小于或等于800px时,改变 p 标签中字的大小。
p{
font-size:12px;
}
}
</style>
<p>Lorem adipiscing elit. Vivamus quis tempus massa. Aenean.</p>
2、图片的自适应
给 img标签增加样式规则使它自适应容器尺寸。(不要使用绝对单位)
max-width属性能让图片以 100% 的最大宽度适应其父容器的宽度,但图片不会拉伸得比原始宽度还宽。
display:block 可以让 image 标签从内联元素(默认值)更改为块级元素。
height: auto 保持图片的原始宽高比。
<style>
img{
display:block;
max-width:100%;
height:auto;
}
</style>
<img src="https://s3.amazonaws.com/Pack.jpg" alt="freeCodeCamp stickers set">
3、针对高分辨率屏幕应使用视网膜图片
为优化图片在高分辨率设备下的显示效果,最简单的方式是定义它们的 width和 height值为源文件宽高的一半。
<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="一张高质量的图片">
4、使排版根据设备尺寸自如响应
除了用
em或 px
去设置文本大小, 你还可以用视窗单位来做响应式排版。
视窗单位还有百分比,它们都是相对单位,但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ,百分比是相对于父级元素的大小。
四个不同的视窗单位分别是:vw:如 10vw的意思是视窗宽度的 10%。
vh:如 3vh的意思是视窗高度的 3%。
vmin:如70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
vmax:如 100vmax的意思是视窗中较大尺寸的 100% (高度VS 宽度)。
<style>
h2{
width:80vw;
}
p{
width:75vmin;
}
</style>
(第四部分完结)