Skip to main content

4 posts tagged with "css"

View All Tags

· One min read
Jeffrey

📺️ 对于 iOS 系统上的移动端，你可以通过以下方法禁止视频自动全屏播放：

1️⃣ 在<video>元素上添加playsinline属性，例如：

<video src="video.mp4" playsinline></video>

这将告诉 iOS 设备在内联模式下播放视频，而不会自动全屏。

2️⃣ 在<video>元素上的 JavaScript 代码中添加webkit-playsinline属性，例如：

var video = document.getElementById('myVideo')
video.setAttribute('webkit-playsinline', 'true')

或者直接添加标签中。

<video src="video.mp4" playsinline webkit-playsinline="true"></video>

这也是告诉 iOS 设备在内联模式下播放视频的方式。

请注意，虽然使用上述方法可以禁止视频自动全屏播放，但用户仍然可以手动切换到全屏模式。

· One min read
Jeffrey

示例​

scss 实现：将 id content_html 内子元素添加滑动进入动画

#content_html {
  margin-top: 20px;
  padding: 0 15px;

  p,
  li {
    margin: 15px 0;
    font-size: 16px;
    line-height: 25px;
  }

  ul,
  li {
    list-style: inside;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025rem;
    line-height: 1.8rem;
    margin: 20px 0;
    outline: none;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 17px;
  }

  h4,
  h5,
  h6 {
    font-size: 16px;
  }

  @keyframes slide-enter {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  * {
    --stagger: 0;
    --delay: 150ms;
    --start: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
  }

  * {
    counter-increment: enter-count;
    --stagger: counter(enter-count);
  }

  .slide-enter-content > * {
    --stagger: 0;
    --delay: 150ms;
    --start: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
  }

  @for $i from 1 through 30 {
    *:nth-child(#{$i}) {
      --stagger: #{$i};
    }
  }
}

参考-antfu

· 7 min read
Jeffrey

例子​

tip

当浏览器窗口的宽度为 600 像素或更小时，将 body 元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

定义和使用​

该@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机是横向还是纵向模式？）
  • 解析度

使用媒体查询是向台式机、笔记本电脑、平板电脑和手机提供定制样式表（响应式网页设计）的一种流行技术。

您还可以使用媒体查询来指定某些样式仅适用于打印文档或屏幕阅读器（媒体类型：打印、屏幕或语音）。

除了媒体类型，还有媒体功能。媒体功能通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更具体的细节。例如，您可以仅将样式应用于大于或小于特定宽度的那些屏幕。

CSS 语法​

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}
tip

not , only和and关键字的含义：

not： not 关键字反转整个媒体查询的含义。

only: only 关键字阻止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。 它对现代浏览器没有影响。

and： and 关键字将媒体特征与媒体类型或其他媒体特征结合起来。

它们都是可选的。但是，如果您使用not或 only，您还必须指定媒体类型。

您还可以为不同的媒体设置不同的样式表，如下所示：

<link
  rel="stylesheet"
  media="screen and (min-width: 900px)"
  href="widescreen.css"
/>
<link
  rel="stylesheet"
  media="screen and (max-width: 600px)"
  href="smallscreen.css"
/>
....

媒体类型​

ValueDescription
all默认。用于所有媒体类型设备
print用于打印机
screen用于电脑屏幕、平板电脑、智能手机等
speech用于大声“阅读”页面的屏幕阅读器

媒体功能​

ValueDescription
any-hover是否有任何可用的输入机制允许用户悬停在元素上？（在媒体查询第 4 级中添加）
any-pointer是否有任何可用的输入机制是定点设备，如果是，其准确度如何？（在媒体查询第 4 级中添加）
aspect-ratio视口的宽度和高度之间的比率
color输出设备的每个颜色分量的位数
color-gamut用户代理和输出设备支持的近似颜色范围（添加在媒体查询级别 4 中）
color-index设备可以显示的颜色数
grid设备是网格还是位图
height视口高度
hover主输入机制是否允许用户悬停在元素上？（在媒体查询第 4 级中添加）
inverted-colors浏览器或底层操作系统是否反转颜色？（在媒体查询第 4 级中添加）
light-level当前环境光级别（添加到媒体查询级别 4 中）
max-aspect-ratio显示区域的宽度和高度之间的最大比率
max-color输出设备的每个颜色分量的最大位数
max-color-index设备可以显示的最大颜色数
max-height显示区域的最大高度，如浏览器窗口
max-monochrome单色（灰度）设备上每种“颜色”的最大位数
max-resolution设备的最大分辨率，使用 dpi 或 dpcm
max-width显示区域的最大宽度，如浏览器窗口
min-aspect-ratio显示区域的宽度和高度之间的最小比率
min-color输出设备的每个颜色分量的最小位数
min-color-index设备可以显示的最小颜色数
min-height显示区域的最小高度，如浏览器窗口
min-monochrome单色（灰度）设备上每种“颜色”的最小位数
min-resolution设备的最小分辨率，使用 dpi 或 dpcm
min-width显示区域的最小宽度，如浏览器窗口
monochrome单色（灰度）设备上每种“颜色”的位数
orientation视口的方向（横向或纵向模式）
overflow-block输出设备如何处理沿块轴溢出视口的内容（在媒体查询级别 4 中添加）
overflow-inline是否可以滚动沿内联轴溢出视口的内容（在媒体查询级别 4 中添加）
pointer主要输入机制是定点设备吗？如果是，其准确度如何？（在媒体查询第 4 级中添加）
resolution输出设备的分辨率，使用 dpi 或 dpcm
scan输出设备的扫描过程
scripting脚本（如 JavaScript）可用吗？（在媒体查询第 4 级中添加）
update输出设备修改内容外观的速度有多快（添加在媒体查询第 4 级中）
width视口宽度