响应式设计笔记整理加+自己Demo中解决的问题

最新推荐文章于 2023-03-08 12:10:28 发布

&烟花易冷&

最新推荐文章于 2023-03-08 12:10:28 发布

阅读量412

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_52761831/article/details/122293484

版权

引言：

一、开发中遇到的问题：

在我刚学习前端时，也是使用px来解决导航栏间距问题，但是我发现随着我对浏览器视口的缩放，我的布局变得杂乱又丑陋，于是我去了解响应式设计。

响应式设计出现的是为了解决浏览器视口大小不同，而产生了令人厌恶的滚动条或是出现页面大部分空白的问题而产生的，此外还有一个好处，响应式是通过设置css样式来达到不同视口的界面设计不同但是是同一个站点的效果，而非在电脑上是一个站点，当使用手机浏览时又是另一个站点的问题。

四种布局类型：固定布局、流动布局、弹性布局、混合布局

布局类型

一、固定布局

固定布局中，页面宽度会被指定为特定大小的像素，其中960px是使用最为广泛的宽度。（960对网格布局提供多种可能）然而固定布局却有一个弊端，那就是他对页面的大小是固定的，当访客使用屏幕较小的设备浏览站点时，会出现丑陋的滚动条。当大屏幕的设备浏览站点时会在页面两边看到大片的、未使用的空白区域。对于固定布局而言，用户的体验性不佳，为了解决这个问题，流动布局便孕育而生。

二、流动布局

在流动布局中，度量的单位不再是像素，而是变成了百分比，这样可使页面具有可变的特性。使用百分比的方法来定义，意味着不用再去关心用户使用的到底是1024px宽的桌面浏览器，还是768px宽的平板电脑浏览器，因为元素的宽度会根据浏览器窗口的宽度自动调整。可以避免固定布局中出现滚动条或者是出现大面积的空白等问题。同时，在实施诸如媒介查询、针对不同分辨率优化样式这样的响应式策略时，流动布局能使这些策略更容易实现，然而，单独使用流动布局这一种方法依然不足以保证所有元素在手机到电视机等一系列设备都能保持良好的效果。因为有些文本的行宽在大屏幕上看起来太宽，在小屏幕上看起来太窄。对用户的体验而言还是不佳，为了解决这一问题，就慢慢地出现了弹性布局

三、弹性布局

弹性布局与流动布局类似，知识他们的度量单位不同——通常情况下，在弹性布局中会以em作为单位。1em 相当于当前字体（父级元素）的大小，（rem是相对于根元素的大小）

实例代码如下：（em_rem)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .q {
            font-size: 6px;
        }
        .qq {
            font-size: 2em;
        }
        .q1 {

            font-size: 2rem;
        }
    </style>
</head>

<body>
    <!-- 
        有多重定义字体大小的方法，包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。

关键字
关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小，你可以在网页的任何地方设置相对字体大小，这让你能轻易地缩放整个网页的字体大小。

像素
当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

字体大小的设置也可以使用组合值。例如，如果父元素设定为16px而子元素设定为larger, 子元素显示的字体大小就会大于父元素。

注意: 用像素字体定义使得字体大小不可由用户的浏览器改变。（例如，视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体）所以，如果你想创造能广泛使用的设计请避免使用像素设定字体。
Em
另一种方法是用em值设定字体大小。em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

可用这个公式计算像素大小的等价em大小：

em = 希望得到的像素大小 / 父元素字体像素大小
例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em (10/16 = 0.625)；若想要22px就定义1.375em (22/16=1.375).

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。


PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
     -->

    <div class="q">
        <p class="q1">hello~gogo</p>
        <p class="qq">hi,jenny</p>
    </div>
</body>

</html>

弹性布局为设计师们在排版方面提供了强大的控制权。大量研究表明，理想的阅读文本的行宽介于45到70个字符之间。利用弹性布局，你可以将容器的宽度设定为55em,这样就可以使容器维持在一个适合的宽度了。

弹性布局的另一个好处就是随用户增大或者减小字体，使用弹性布局的元素的宽度也会等比例地变化。但是在弹性布局中也会出现令人讨厌的水平滚动条。（如果你把字体大小设置为16px，并把容器宽度设置为55em,那么就会在任何宽度小于880px（16×55）的屏幕中出现水平滚动条，弹性布局中的问题甚至比固定布局中的情况还要有更多的不确定性，因为如果用户把字体放大到了18px,那么你的容器宽度变回达到990px（18×55）

四、混合布局

他结合上面两种或两种以上的布局方式。

假定现有300px宽的广告区域，那么你可以将放置广告的边栏指定为固定的300px宽，其余各列的宽度则以百分比为单位，这样做既保证了广告的宽度是固定的300px(考虑到第三方的广告服务，这样安排是很有必要的)，同时除边栏之外的其他内容也能填满剩下的整个空间。但是这样的方法并不是万能的，在屏幕小于1000px时，就会出现滚动条，因为300px 宽的边栏已经超过了分配给他的宽度，即视口宽度的30%,剩下的空间已经小于内容栏的所要求的70%，因而会出现令人厌恶的滚动条。

媒介查询

媒介查询允许你根据设备信息——诸如屏幕宽度、方向或者分辨率等属性来使用不同的样式

虽说可以通过媒介查询来在几个固定布局之间来回切换，但这样做仍旧存在限制。因为使用一个这样的可切换的固定布局，会使得你的站点在某个特定分辨率的屏幕中显得更友好，但是在这几个值之间过渡的那些分辨率的屏幕中就会显得比较尴尬。

如果使用流动布局，即使没有媒介查询的帮助，诺的设计都能在不同的视口之间做出调整，虽然前会有一些不完美。

使用媒介查询时，很容易忽视掉的另外一点就是：其实是弹性布局或流动布局在发挥更主要的作用，流动布局为你做的事情越多，你需要创建的断点、css代码就越少。当你有了一个强大的流动布局的时候，媒介查询就会弱化为一种调整设计的手段，而不必再去重新创建另外的设计。

断点：那些被指定的、开始应用某一新的媒介查询的点，例如：一个在960px处的断点的意思是当浏览器宽度大于或小于这一数值时，新的媒介查询就会被触发。

使用像素作为字体大小时不需要考虑级联——父元素的字体大小对子元素没有影响，但这也意味着当你想让某些文本以不同的大小显示时就需要对他们逐一设置，这对于维护而言非常不利，当你要增大所有字体时就要一个一个的去修改每一个值的大小。

更重要的是，以像素为单位的字体存在着潜在的可访问性问题。所有主流的浏览器都允许用户放大或缩小页面，浏览器对该操作通常有两种实现方式：

简单地讲页面所有的东西都放大，在这种情况下，无论字体大小使用哪种单位，都允许用户进行缩放。
浏览器只调整文本的大小，页面上其他元素则保持不变。

而且以像素为单位的字体在老版本的IE浏览器中是无法实现缩放的，这意味着那些使用IE9之前的、字体被设为默认大小的IE浏览器（或者在最新版中启用了字体默认大小的浏览器）的用户，是不能调节你页面中字体的大小的。

用像素指定字体大小依然不是一种对未来特别友好的方式。由于不同的设备有着不同的屏幕大小和像素密度，因此以像素为单位的字体也许在这台设备上看起来不错，但是在另一台设备上看起来也许要么太大、要么太小。使用像素作为字体大小的单位，是与web灵活性原则背道而驰的做法。

em（相对于当前元素即父元素）

为了解决字体使用像素作为单位时灵活性不高的问题，人们开始使用em作为字体大小的单位，1em等于默认的字体大小，em可以跨浏览器进行缩放，而且他们也是级联的，从简化维护的角度来看这是好事，因为这样相对的指定元素的字体大小，意味着只需要调整初始化时的基准，其余部分就会自动的进行调整，而且是按比例调整的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 16px;
        }
        p{
            font-size: 1.5em; /* 此时字体大小为24px   */
        }
        span{
            font-size: .666667em; /*字体大小为16px,若设为1em字体大小为24px，因为em相对于父元素而言的，此时父元素(基准)为24px,因此若将字体设为1em,字体大小为24px而不是16px*/
        }
    </style>
</head>
<body>
    <div class="main">
        <p>
            hello,gogo~!<span>nice to meet you!</span>
        </p>
    </div>
</body>
</html>

百分比

和em为单位的字体一样，以百分比为单位的字体也是可缩放的，而且也是级联的。另外与em类似的是，如果基准字体的大小是16px的话,那么100%相当于16px,200%相当于32px.

虽然从理论上讲百分比和em没有太大的区别，而且em组件称为web中更受欢迎的字体度量单位，只有当出于em直接与文本大小相关的的考虑时，使用em才更有意义。

注意：在IE浏览器中，却在现实以em为单位的基准字体时有问题。如果基准字体以em为单位的，那么IE会夸大实际应当调整的字体大小。（这是以前版本看，通过实践发现并不会）

在大多数的浏览器器和设备中，默认的字体大小都是16px，通过把页面的font-size指定为100%时，可以在浏览器中得到相同大小的字体。默认字体的大小有的设备默认字体的大小为22px(黑莓手机)

有很多的新设备都有较高的分辨率，因此，16px的字体在上面看起来非常小，大多数设备只好通过向浏览器报告说，自己有一个与实际不符的分辨率来绕过这个问题（如：iPhone4的分辨率是640×960，但是他会告诉浏览器自己的分辨率是320×480）

其实最主要的不是屏幕实际的像素大小，屏幕上文字的可读性才是真正重要的，虽然可以将基准的font-size设置为100%，但是要记住用户使用的设备的基准字体大小也许不是16px,这也就是为什么在媒介查询中使用em的一个原因

rem

rem的大小与根元素——html元素有关

使用rem能够避免发生在嵌套元素中的级联问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 16px;
        }
        p{
            font-size: 1.5em; /* 此时字体大小为24px   */
        }
        span{
            font-size: 1rem;   /* 此时字体大小为16px,是根据根元素html元素   */
        }
    </style>
</head>
<body>
    <div class="main">
        <p>
            hello,gogo~!<span>nice to meet you!</span>
        </p>
    </div>
</body>
</html>

注意区分em与rem

但是有些浏览器还不支持rem,为了应对上面这种方法，可以额外设置一个像素为单位的备用方案

span{
           font-size：16px;
           font-size: 1rem;  
}

如果不知道浏览器字体的大小可以通过调试查看该网页的字体的大小

哪种单位最具响应性的

css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

使用em不但可以是文字能够缩放，而且维护起来也更加容易。如果你要将整个站点的字体都增大，那么只需简单的修改body上字体的百分比即可。如果使用rem，由于需要有像素声明作为补充，所以你还需要更新所有的像素值。

我们可以将百分比作为body元素字体大小的单位，以em作为其他元素的单位。

从像素的转换

以像素为单位的字体大小，灵活性不高，因此为了将原有固定大小的元素或者单位转换为一些更加灵活的东西

灵活地设置字体虽然看起来和像素指定大小的字体完全相同，但现在当字体增大时，其比例保持不变，即只需要修改body中字体的大小，其余元素的大小随之等比例的改变，但是如果使用像素的话，要一个一个修改，不能解放程序员，为了以后维护更方便，决定使用灵活性更高的em和百分比的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 16px;    （更具灵活性：font-size：100%；）
        }
        p{
            font-size: 24px; /* 此时字体大小为24px   */      (目标/上下文环境=结果     font-size：1.5em;)
        }
        span{
            font-size: 12px;   /* em相对于父元素  */   (目标/上下文环境=结果     font-size：.5em;)
        }
    </style>
</head>
<body>
    <div class="main">
        <p>
            hello,gogo~!<span>nice to meet you!</span>
        </p>
    </div>
</body>
</html>

温馨tip：写代码时最好使用注释，不然不知道怎么来的

网格布局

早在web出现前的数十年，在设计中使用网格就已经是一种异常流行的做法了，因为网格有助于实现站点的平衡、间距以及组织结构。一个实现良好的网格系统会使你的站点井井有条，同时还可以提高页面的可读性和可浏览性。

网格的四大主要优势：