唐山建设企业网站,网站名词,xampp安装wordpress,网页版梦幻西游探案寻奇攻略一、媒体查询#xff08;Media Queries#xff09;
基本概念 媒体查询是 CSS3 中用于根据不同的设备特性#xff08;如屏幕宽度、高度、设备类型等#xff09;应用不同样式规则的技术。它允许你为特定的媒体类型#xff08;如屏幕、打印、手持设备等#xff09;和条件Media Queries
基本概念 媒体查询是 CSS3 中用于根据不同的设备特性如屏幕宽度、高度、设备类型等应用不同样式规则的技术。它允许你为特定的媒体类型如屏幕、打印、手持设备等和条件如最小宽度、最大宽度等定义样式。 例如你可以为屏幕宽度小于 768px 的设备通常是手机定义一组样式为屏幕宽度在 768px 到 1024px 之间的设备平板电脑定义另一组样式。 语法结构 媒体查询的基本语法如下
media media - type and (media - feature - rule) {/* CSS样式规则 */
}其中media - type可以是screen用于屏幕设备、print用于打印设备、handheld用于手持设备等。media - feature - rule是具体的媒体特性规则如(max - width: 768px)表示最大宽度为 768px 的设备。 例如以下代码会在屏幕宽度小于或等于 600px 时将背景颜色设置为蓝色
media screen and (max - width: 600px) {body {background - color: blue;}
}常见的媒体特性 屏幕宽度相关 max - width指定一个最大宽度值当屏幕宽度小于或等于这个值时媒体查询中的样式规则生效。例如(max - width: 480px)适用于屏幕宽度不超过 480px 的设备常用于为手机等小屏幕设备设计样式。 min - width指定一个最小宽度值当屏幕宽度大于或等于这个值时样式规则生效。比如(min - width: 768px)可以用于为平板电脑及更大屏幕设备设计样式。 屏幕高度相关相对较少使用但在某些场景下很有用 max - height和min - height的作用与宽度相关特性类似只是针对屏幕的高度。例如在设计一个高度受限的弹出窗口或者全屏应用时可以使用这些特性来确保样式在不同高度的屏幕上都能正常显示。 设备方向 orientation: portrait纵向和orientation: landscape横向可以根据设备的方向应用不同的样式。例如在手机从纵向切换到横向时可以改变布局使内容更好地适应屏幕。
二、弹性布局Flexbox
基本概念 Flexbox 是一种用于在容器中布局子元素的 CSS 布局模型。它提供了一种灵活的方式来分配空间和对齐元素使得布局能够更好地适应不同的屏幕尺寸。 使用 Flexbox可以轻松地实现水平和垂直方向的对齐以及子元素的自动缩放和排列。 关键属性 容器属性 display: flex将一个元素设置为 Flex 容器。一旦设置为 Flex 容器其内部的子元素称为 Flex 项目就可以使用 Flexbox 的布局规则进行排列。 flex - direction用于指定 Flex 项目的排列方向。可以是row水平方向从左到右、row - reverse水平方向从右到左、column垂直方向从上到下或column - reverse垂直方向从下到上。 justify - content用于在主轴由flex - direction确定上对齐 Flex 项目。常见的值有flex - start默认值项目向主轴起点对齐、flex - end项目向主轴终点对齐、center项目在主轴上居中对齐、space - between项目在主轴上均匀分布两端对齐和space - around项目在主轴上均匀分布每个项目两侧的间隔相等。 align - items用于在交叉轴与主轴垂直的轴上对齐 Flex 项目。值包括stretch默认值项目会拉伸以填充交叉轴方向的容器空间、flex - start、flex - end和center。 项目属性 flex - grow定义 Flex 项目在容器有剩余空间时的伸展比例。例如如果有两个 Flex 项目一个flex - grow为 1另一个为 2那么后者将占用剩余空间的三分之二前者占用三分之一。 flex - shrink与flex - grow相反它定义了在容器空间不足时 Flex 项目的收缩比例。 flex - basis用于指定 Flex 项目在分配多余空间或收缩之前的初始大小。它可以是一个长度值如100px或一个百分比。
三、网格布局Grid Layout
基本概念 CSS Grid 是一种二维布局系统它允许你将页面划分为行和列然后将元素放置在这些网格单元中。网格布局提供了强大的布局控制能力能够创建复杂的页面布局并且在响应式设计中也非常有用。 关键属性 容器属性 display: grid将一个元素设置为网格容器。 grid - template - rows和grid - template - columns用于定义网格的行和列的大小。例如grid - template - rows: 100px 200px;表示网格有两行第一行高度为 100px第二行高度为 200px。grid - template - columns的用法类似。 grid - gap用于设置网格单元之间的间隙大小。可以分别设置行间隙和列间隙如grid - row - gap和grid - column - gap也可以使用grid - gap同时设置行和列的间隙grid - gap: 10px 20px;表示行间隙为 10px列间隙为 20px。 项目属性 grid - row - start、grid - row - end、grid - column - start和grid - column - end这些属性用于指定项目在网格中的位置即项目从哪一行 / 列开始到哪一行 / 列结束。例如grid - row - start: 2; grid - row - end: 4;表示项目跨越从第二行到第四行不包括第四行的网格单元。 grid - area这是一个简写属性可以同时指定项目的行和列位置。例如grid - area: 2/1/4/3;表示项目从第二行第一列开始到第四行第三列结束。
四、相对单位如 vw、vh、% 等
## vw 和 vh视口单位 vwviewport width表示视口宽度的 1%vhviewport height表示视口高度的 1%。例如如果一个元素的宽度设置为50vw那么它的宽度将是视口宽度的 50%。 这些单位在创建全屏幕或基于视口比例的布局时非常有用。比如你可以使用vh来设置一个元素的高度使其始终占据屏幕高度的一定比例这样在不同高度的屏幕上也能保持一致的视觉效果。 百分比%单位 百分比单位是相对于父元素的尺寸来计算的。例如在一个容器中如果一个子元素的宽度设置为50%那么它的宽度将是父元素宽度的一半。 在响应式设计中百分比单位可以用于创建灵活的布局。比如在一个多列布局中各列的宽度可以使用百分比来定义这样当父容器的宽度发生变化时如在不同屏幕尺寸下列宽也会相应地调整。 em 和 rem em 是相对于元素的字体大小rem 是相对于根元素通常是 的字体大小。使用它们可以创建基于字体大小的相对尺寸。 例如font-size: 1.2em; 会使元素的字体大小为父元素字体大小的 1.2 倍font-size: 1.2rem; 会使元素的字体大小为根元素字体大小的 1.2 倍。
