😹一路走来，响应式网页开发的学习与踩坑学习过程中的注意点关于grid-auto-rows/columns和grid-

前言本文记录了我在学习响应式网页开发过程中遇到得问题，以及学习过程中遇到的一些好的相关的博客，包括大量的各种踩坑，和解决方式，现在总结出来，希望可以帮到大家🥰！

学习过程中的注意点

关于grid-auto-rows/columns和grid-template-rows/columns使用过程中注意点

grid-auto-rows/columns只能设置一个值，设置完之后每一个子项目的行或者列都会应用该值（用来设置子项目的宽和高）。
grid-template-rows/columns只能按照顺序一个一个的设置。

关于使用gird布局来书写响应式网页的时候的注意点

当使用@media属性的时候采用(min-width:xxpx)来判断，即屏幕尺寸大于多少时响应，则@media属性之外的所有css样式基本就是用来描述媒体屏幕尺寸最小的时候。
当使用@media属性的时候采用(max-width:xxpx)来判断，即屏幕尺寸小于多少时响应，则@media属性之外的所有css样式基本就是用来描述媒体屏幕值最大的时候。

CSS :root CSS 变量 var() env() 的学习

CSS伪元素之:selection

作用：::selection选择器主要用于文档中被用户高亮的部分（鼠标或者其他设备选中的部分）
支持属性：

color background-color cursor caret-color outline text-decoration text-emphasis-color text-shadow
需要注意的是如果该伪元素不与其他元素组合使用，那么他将会存在与根元素上，使得所有元素均有选中效果。

CSS伪元素之-webkit-scrollbar系列

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

注意点：最常用的就是：::-webkit-scrollbar，::-webkit-scrollbar-track，::-webkit-scrollbar-thumb这三个，并且一旦使用了-webkit-scrollbar设置宽高之后，浏览器默认的滑块就会透明，所以必须配合，thumb属性使用，并且垂直滑动的时候width生效，水平的时候hieght生效,而且相当于控制了track属性的background-color属性一样。（也只能控制这个了）

CSS outLine属性

CSS outline（轮廓）是一个简写属性，用于围绕元素外部绘制一条线。它与 a:focus 选择器结合使用特别有用，可以更加强调链接或其他元素。 outline 与 border 相似，不同之处在于 outline 在整个元素周围画了一条线；它不能像 border 那样，指定在元素的一个面上设置轮廓，也就是不能单独设置顶部轮廓、右侧轮廓、底部轮廓或左侧轮廓。

CSS outLine详解

CSS的text-transform属性

text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

CSS的@media与@media screen，媒体查询

在网站自适应设计中，@media与@media screen是经常会用到的css代码，其功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

@media与@media screen区别

@media与@media screen两者在电脑&手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，就用@media；否则，就用@media screen。

不过这只是笼统的做法，其实如果把screen换为print，写为@media print，那么该css就可用到打印设备上了，但要注意，@media print声明的css只能在打印设备上有效！

@media语法

以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式，如果表达式为真，则应用样式。

@media (max-width: 600px) {
    .class1 {
        background: #fff;
      }
}
@media screen and (max-device-width: 600px) {
    .class2 {
        background: #ccc;
    }
}
@media only screen and (device-aspect-ratio:4/3){
    .class3 {
        background: #eee;
    }
}

max-width 是目标显示区域的宽度，例如，浏览器宽度。 max-device-width 是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。 device-aspect-ratio 可以适配特定屏幕长宽比的设备，例如，设备屏幕长宽比为4:3、16:9或16:10。

媒体查询media还可以作为属性在 link标签中使用：

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是：当屏幕的宽度大于600px且小于800px时，应用style.css文件。

知识扩展

@media only screen and

only：限定某种设备。
screen：彩色电脑屏幕，是媒体类型里的一种。
and：关键字，连接多个表达式。
not：关键字，排除不支持的媒体类型。
其他媒体类型：all（所有设备）、braille（盲文）、embossed（盲文打印）、print（文档打印或打印预览模式）、projection（项目演示，比如幻灯）、speech（演讲）、tv（电视）。

classList.toggle方法

这个方法可以给dom元素添加类，消除类。如下面代码片段，当点击toggle标签时，会给这个标签添加和消除“is-open”类

  toggle.addEventListener("click", function (e) {
     e.preventDefault();
     dropdown.classList.toggle("is-open");
});


// 或者这样
menuBtn.onclick = () => {
    // classList.toggle这个方法会不断地添加和删除该类
    menuBtn.classList.toggle('fa-times');
    navbar.classList.toggle('active');
}

深入理解flex-basic

flex-basis 属性用于设置弹性盒子的基准尺寸（即主轴上的尺寸），它定义了在分配多余空间之前弹性盒子的初始大小。

flex-basis 属性可以接受一个长度值或百分比值作为参数。长度值表示具体的像素值，百分比值表示相对于包含块的宽度或高度的百分比。

如果 flex-basis 属性设置为 auto（默认值），则弹性盒子的基准尺寸由其内容决定（即自适应大小）。如果 flex-basis 属性设置为 0，则弹性盒子的基准尺寸为 0，即强制将弹性盒子压缩为最小尺寸。

需要注意的是，flex-basis 属性只在弹性盒子的元素的主轴上生效。在交叉轴上，弹性盒子的尺寸由 height 或 width 属性决定。

另外，当 flex-basis 和 width 或 height 属性同时存在时，flex-basis 属性具有更高的优先级，即会覆盖 width 或 height 属性。

下面是一个示例代码，演示了如何使用 flex-basis 属性：

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.item {
  flex-basis: 100px;
  height: 100px;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: green;
}

.item3 {
  background-color: blue;
}

在上面的例子中，.container 元素设置为弹性盒子，并使用 justify-content: space-between 和 align-items: center 属性，将其中的三个 .item 元素分别沿主轴和交叉轴对齐。

.item 元素的 flex-basis 属性设置为 100px，即在主轴上的基准尺寸为 100 像素。由于 .container 元素的高度为 200px，因此三个 .item 元素的高度也设置为 100px，以使它们在交叉轴上垂直居中。

在这个示例中，由于 .container 元素的宽度足够容纳三个 .item 元素，因此它们的宽度都为 100px。但是，如果 .container 元素的宽度不足以容纳三个 .item 元素，则 flex-basis 属性就会发挥作用，调整 .item 元素的宽度以适应 .container 元素的宽度。

line-hight：1;注意点

为1代表去掉上下的行间距，表现为和字体内容同高，即高等于字体大小 line-height: 1;

/* 不带单位就是指2倍行高，即font-size大小的两倍*/ line-height: 2;

CSS中的报错点

出现expected，一般就该行的前面有点小错误

{ expectedcss(css-lcurlyexpected)一般都是指改行的前面有些错误。

css控制页面文字不能被选中user-select:none;

有时候css样式不生效可能是html标签写错了，检查一下index.html文件。

CSS的appearance属性

appearance 属性用于改变表单控件的外观样式，其适用于除了 <input> 元素外的大部分表单元素（例如 <button>、<textarea>、<select> 等）。

appearance 属性可以接受多个值，常用的值有：

auto：默认值，表示使用浏览器默认的样式；
none：表示不显示默认的样式，可以通过其他 CSS 属性自定义表单元素的样式；
button：将表单元素呈现为按钮样式；
checkbox：将表单元素呈现为复选框样式；
radio：将表单元素呈现为单选框样式；
searchfield：将表单元素呈现为搜索框样式；
slider-horizontal、slider-vertical：将表单元素呈现为水平或垂直滑块样式。

需要注意的是，appearance 属性在不同浏览器中可能存在兼容性问题，而且不同的值可能会产生不同的效果。因此，在使用 appearance 属性时需要谨慎考虑其兼容性和效果。

下面是一个示例代码，演示了如何使用 appearance 属性：

<button class="button">按钮</button>
<input type="checkbox" class="checkbox" />
<input type="radio" class="radio" name="gender" value="male" />男性
<input type="radio" class="radio" name="gender" value="female" />女性
<select class="select">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

.button {
  appearance: button;
}

.checkbox {
  appearance: checkbox;
}

.radio {
  appearance: radio;
}

.select {
  appearance: none;
  padding: 0.5em;
  border: 1px solid gray;
  background-color: white;
  border-radius: 0.25em;
  font-size: 1em;
  color: black;
}

在上面的例子中，.button 元素的 appearance 属性设置为 button，将其呈现为按钮样式；.checkbox 元素的 appearance 属性设置为 checkbox，将其呈现为复选框样式；.radio 元素的 appearance 属性设置为 radio，将其呈现为单选框样式。

而 .select 元素的 appearance 属性设置为 none，并通过其他 CSS 属性自定义了表单元素的样式，以使它呈现为自定义的下拉列表样式。这个自定义样式包括了背景色、边框、圆角、字体大小和颜色等属性。需要注意的是，如果不将 appearance 属性设置为 none，则浏览器会默认显示下拉列表的样式，而不是自定义的样式。

对于一个正方形来说：border-radius:的值超过宽度的一半就会变成圆形。

对于一个长方形来说：border-radius:的值超过宽度的一半就会变成胶囊形。

input:checked + label；input:checked ~ label分别是什么意思

input:checked + label

input:checked ~ label

input:checked ~ label ：相邻同胞选择器，选择被勾选的input标签后所有的label标签［input 和 label标签有共同的父元素］；

input:checked ＋ label ：相邻同胞选择器，选择被勾选的input标签后第一个label标签［input 和 label标签有共同的父元素］；

CSS3中-webkit是什么意思

-webkit 是一个 CSS3 中的私有前缀（Vendor Prefix），用于指定只在 WebKit 内核浏览器（如 Google Chrome、Safari 等）中生效的 CSS 样式。在 CSS3 标准还未最终确定之前，不同浏览器厂商会尝试实现新的 CSS3 样式，并在其前面添加私有前缀，以避免出现兼容性问题。

例如，-webkit-border-radius 是一个 WebKit 内核浏览器中生效的 CSS3 样式，用于设置圆角半径。在其他浏览器中使用该样式是无效的，需要使用其他厂商的私有前缀或等效的标准样式。

在使用私有前缀时，需要注意以下几点：

私有前缀只在特定的浏览器内核中生效，不能保证在其他浏览器中生效；
私有前缀的样式名称可能会在标准化后发生变化，因此在编写 CSS 样式时需要注意不要过度依赖私有前缀；
在编写 CSS 样式时，应该先编写标准样式，再加上私有前缀，而不是先编写私有前缀样式。

随着 CSS3 标准的不断完善，大部分浏览器已经支持了大部分 CSS3 样式，因此使用私有前缀的情况已经越来越少。而且，随着浏览器对标准的支持越来越完善，很多私有前缀样式已经被废弃，不再需要使用私有前缀来实现。

flex布局里面

如果子项目添加了margin属性，则该子项目就会占有所有的剩余空间，在根据left/rignt/来调整自生的内容所在位置。

当块级元素和行内元素在一起的时候,边距会出现吸收的现象 ,直接不会显示margin,解决办法:display:设置为inline-block 、

display: inline-block;

swiper注意点

使用swiper做切换效果之后，swiper-wrapper里面的每一项swiper-slide和真正的html结构里的swipe-slide的顺序有所不同，所以使用，nth-child()的时候要注意。

使用swiper时，如果有多个滑块控制器。呢么用var去修饰变量，不要用const,会报错。

rotate()旋转角度/顺逆时针问题

理论上都应是让各轴的正向(X轴向右、Y轴向下、Z轴面向自己)指向自己，顺时针(正角度值)/逆时针(负角度值)转；

但rotate()、rotateZ()，会采用就近转到目标角度原则：

小于180°，正常顺时针，但大于180°就要注意：例设值200deg，会逆时针转160度完事；
设180°会逆时针转，-180°才顺时针；
设360°的倍数值压根转都不转。
而rotateX() 、 rotateY()这两个，还是会老老实实的转，一度不少，正值顺、负值逆。

伪元素在内容为空的前提下，设置了宽高，想要显现出来就要使用定位position

object-fit:注意点

==container是吧图片宽高较长的呢一方进行缩放到和img元素相同，在按照缩放比把较短的呢一方进行缩放==

响应式网站的媒体断点

我们把以上的断点写个简单的demo感受下：响应式断点设置demo

从以上得出一般要考虑的几个关键断点分别为：手机横屏，平板竖屏，pc窄屏，pc宽屏，pc超大屏（比较适合购物商城，视频类站点），再加上默认的手机样式就构成了全方位海陆空覆盖，正好对应上我们设置断点的第一条规则，主要平台都涉及了。

这里我们提出三个问题：

为什么是min-width，max-width可以不？为什么是这些数字，而不是别的数字？为什么用min-width？这里先说min-width和max-width的区别：min-width表示屏幕最小宽度为多少，也即等于或大于该值，如min-width:768px则表示屏幕要等于或大于768px才会应用该样式，同理max-width表示最大宽度为多少，也即小于或等于该值。

在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先，bootstrap采用的是==移动优先==，移动优先的特点是先考虑设计移动的样式，然后再设置断点一步步向大尺寸添砖加瓦增加样式，所以采用min-width（移动端的样式相对来说都比较简单，而pc相对来说要复杂点，所以这种顺序是样式由少到多，由简单到复杂的过程）。反过来如果你的业务是==pc优先==，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费）

为什么是这些数字？至于断点数字为什么是这些数字呢？这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。为什么是这三种数字其实跟内容在各个平台的表现有关。对于pc端，我们一般设置主体内容固定宽度居中，所以就以此作为断点；而平板竖屏因为宽度比较窄，所以都会全部占满空间，所以768px就代表了这个宽度；而544px其实我也不知道到底是某个平板的宽度（这个平板很小）还是某个手机的横屏宽度，所以我觉得应该是一个范围，用来界定手机和平板的界限，在这以下都是手机端。（这个问题有知道的请告诉我下，查了很多资料都没找到）

现在看起来一下明白了，那么我们是否可以直接拷贝过来使用就可以呢？

clip-path和box-shodow的使用注意带点

 .header .nav-info .navbar {
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        background: var(--white);
        border-top: .2rem solid var(--black);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .header .nav-info .navbar.active {
        clip-path: polygon(0 0, 100% 0, 100% 103%, 0% 103%);

    }

注意点:下面的clip-path: polygon(0 0, 100% 0, 100% 103%, 0% 103%)中的103%是为了显示处box-shadow，不然会被隐藏掉。

font awesome的使用注意点

带有.fa, .fab, .fad, .fal, .far, .fas类的行内元素显示模式会变成行内块元素，例如i标签和a标签

定位时的注意点。

如果父级元素使用的是相对定位，自己是绝对定位的话，当子级元素左右或者上下设的位负值，则父元素就可以随鼠标一起移动就很不好。

响应式布局网页的一些标准

使用流式布局：流式布局是一种根据视口宽度自动调整网页布局的方法。使用流式布局可以确保网页内容不会超出视口范围，同时可以保持网页的比例和平衡。
使用媒体查询：媒体查询是一种CSS技术，可以针对不同的设备尺寸和屏幕分辨率，应用不同的CSS样式。通过媒体查询可以为不同的设备提供不同的网页布局和样式。
使用相对单位：相对单位（如 em、rem、vw、vh 等）可以根据用户设备的屏幕尺寸和分辨率来自适应地调整网页元素的大小和位置，从而保持网页的比例和平衡。
使用图片自适应技术：使用图片自适应技术可以确保图片在不同的设备上能够自适应地调整大小和布局，以适应不同的屏幕分辨率和设备尺寸。常用的图片自适应技术包括响应式图片、矢量图像和SVG。
使用弹性和可伸缩的网格系统：弹性和可伸缩的网格系统可以根据设备的屏幕尺寸和分辨率，自适应地调整网页的布局和排版，以使其在不同的设备上保持比例和平衡。
考虑移动优先：移动优先是一种设计理念，强调在设计网页时应该优先考虑移动设备的体验。在设计响应式布局网页时，应该优先考虑移动设备的尺寸和分辨率，以确保网页在移动设备上具有良好的用户体验。
测试和优化：在设计响应式布局网页时，应该进行测试和优化，以确保网页在不同的设备和浏览器中都能够正常显示和运行。常用的测试工具包括浏览器开发者工具、模拟器和真实设备测试。

最后

以上就是《响应式网页开发的学习与踩坑》的全部内容！我是多动症男孩（ddboy），因为自己淋过雨，所以想给你们撑把伞的未来前端技术专家，最后希望大家都能通过本文的学习能有所收获🤗！！！