响应式页面
- 利用一套代码实现页面的布局和排版以适配不同分辨率的设备
两大问题
- 为不同特性（如横屏还是竖屏等）的浏览器视窗使用不同的样式代码
- 让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化
解决问题一：根据不同特性（如横屏还是竖屏等）的浏览器视窗使用不同的样式代码
使用 Media Queries
- Media Queries 是为指定特性的浏览器视窗应用指定样式【CSS 样式的过滤器或拦截器】
- 「@media 规则」结合「6 个查询参数」来拦截设备的浏览器特性（如显示类型、视窗高度、视窗宽度、横竖屏等）。
6 个参数
| 参数名称 |
参数描述） |
| min-width |
当视窗宽度大于或等于指定值时，@media 规则下的样式将被应用 |
| max-width |
当视窗宽度小于或等于指定值时，@media 规则下的样式将被应用 |
| min-height |
当视窗高度大于或等于指定值时，@media 规则下的样式将被应用 |
| max-height |
当视窗高度小于或等于指定值时，@media 规则下的样式将被应用 |
| orientation=portrait |
当视窗高度大于或等于宽度时，@media 规则下的样式将被应用 |
| orientation=landscape |
当视窗宽度大于高度时，@media 规则下的样式将被应用 |
用法
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
- 在 style 标签或 样式文件内使用 @media 规则
@media (max-width: 640px) {
/*当视窗宽度小于或等于 640px 时，这里的样式将生效*/
}
样式断点
Bulma
| 断点名称 |
断点描述） |
| mobile |
移动设备断点，视窗宽度 ≤ 768 px |
| tablet |
平板电脑设备断点，视窗宽度 ≥ 769 px |
| desktop |
桌面电脑断点，视窗宽度 ≥ 1024 px |
| widescreen |
宽屏电脑断点，视窗宽度 ≥ 1216 px |
| fullhd |
高清宽屏电脑断点，视窗宽度 ≥ 1408 px |
@media (min-width: 769px) {
/* tablet 及以上的设备，页面背景色设置为红色 */
body {
background-color: red;
}
}
在线示例（Media Queries)
解决问题二：让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化
1、引入viewport meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
2、使用单位
仅使用 vw 作为 CSS 长度单位
- 利用 Sass 函数将设计稿元素尺寸的像素单位转换为 vw 单位
// iPhone 6尺寸作为设计稿基准
$vw_base: 375;
@function vw($px) {
@return ($px / $vm_base) * 100vw;
}
- 无论是文本字号大小还是布局高宽、间距、留白等都使用 vw 作为 CSS 单位
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vw(15) vw(10) vw(10); // 内间距
&_item {
flex: 1;
text-align: center;
font-size: vw(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vw(40); // 宽度
height: vw(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vw(2);
}
}
}
}
- 1 物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现
.mod_grid {
position: relative;
&::after {
// 实现1物理像素的下边框线
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
background-color: #ddd;
height: 1px;
left: 0;
right: 0;
top: 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
...
}
- 对于需要保持高宽比的图，应改用 padding-top 实现
.mod_banner {
position: relative;
// 使用padding-top 实现宽高比为 100:750 的图片区域
padding-top: percentage(100/750);
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
在线体验
vw 搭配 rem
- rem 弹性布局的核心在于根据视窗大小变化动态改变根元素的字体大小
优化方向
- 给根元素的字体大小设置随着视窗变化而变化的 vw 单位，这样就可以实现动态改变其大小
- 其他元素的文本字号大小、布局高宽、间距、留白都使用 rem 单位
- 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度，实现布局宽度的最大最小限制
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
体验地址
网友评论