学习笔记之响应式设计

最新推荐文章于 2023-06-12 11:12:04 发布

皆凡人

最新推荐文章于 2023-06-12 11:12:04 发布

阅读量217

点赞数

文章标签：响应式设计

本文链接：https://blog.csdn.net/qq_37431724/article/details/88915730

版权

一、媒体查询

（一）阻止移动浏览器自动调整页面大小

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale= 0.5" />

content=initial-scale=2.0	将页面放大两倍
width=device-width	浏览器页面的宽度等于设备宽度
maximum-scale=3, minimum-scale= 0.5	允许用户将页面宽度的 3 倍，最小压缩至设备宽度的一半。
user-scalable=no	禁止缩放。
content=initial-scale=2.0	将页面放大两倍

（二）针对不同视口宽度修正设计

1．范围 Range

@media only screen and (min-width: 320px) and (max-width: 480px) {

    /* ruleset for 320px - 480px */

}

2．DPI （Dots Per Inch）

@media only screen and (min-resolution: 300dpi) {

    /* CSS for high resolution screens */

}

3．逗号分隔序列 Comma Separated List

If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list.

@media only screen and (min-width: 480px), (orientation: landscape) {

    /* CSS ruleset */

}

4．中断点 Breakpoints

二、流体布局

（一）将网页从固定布局修改为百分比布局

因为将视口放大或缩小，间距并不会相应地增加减小，容易造成窜行。

将固定像素宽度转换对应的百分比宽度公式：目标元素宽度÷上下文元素宽度=百分比宽度

（二）用 em/rem 替换 px

1．em

CSS中第一个相对度量单位是em。

.heading {

  font-size: 2em;

}

在上面的示例中，没有指定基本字体大小，所以heading元素的字体大小将根据浏览器的默认值设置。假设默认字体大小为16像素，那么heading元素的字体大小将为32像素。

.splash-section {

  font-size: 18px;

}

.splash-section h1 {

  font-size: 1.5em;

}

上面的示例显示了如何在不依赖浏览器的默认字体大小的情况下使用em。与根据浏览器的默认字体大小不同，splash-section元素中的所有文本定义基本字体大小（18px），那么splash-section内所有h1元素的字体大小则是基于18px的splash-section的，所以得到的h1元素的字体大小为27像素。

2．Rem

CSS中第二个相对度量单位是rem。

Rem代表root em。它的行为类似于em，但它不是基于父元素的大小字体，而是基于根元素。根元素是<html>标记。

大多数浏览器将<html>的字体大小默认设置为16像素。

如果在完成了所有文字排版后，又想将页面文字统一放大一点，就可以只修改父元素或根元素的文字大小，其他所有文字也会相应变大。

（三）弹性图片

1．让图片随视口缩放

注意：此时不能指定图片的宽度和高度

img {

 max-width: X%;

}

2．给弹性图片设置阈值

像素很大的视口中，图片也会被拉大，其显示宽度大于图片实际宽度，此时需要通过追加另一个特定样式max-width: XXpx来为图片设置阈值。

（四）流动网格布局和媒体查询的默契配合

@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 网格系统

Bootstrap、Skeleton、Semantic UI、Foundation、UIkit等

皆凡人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之响应式设计

一、媒体查询（一）阻止移动浏览器自动调整页面大小<meta>标签可以控制页面可缩放的范围。<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale= 0.5" /> content=initial-scale=2.0 将页面...
复制链接

扫一扫