CSS知识点整理 

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  overflow: auto;
}
</style>
</head>
<body>

<h1>resize 属性</h1>

<div>
  <p>只允许用户调整 div 元素的宽度。</p>
  <p>请点击并拖动 div 元素的右下角。</p>
</div>
  • CSS变量，CSS var() 函数用于引用一个自定义属性（也称为CSS变量）的值。这些自定义属性通常在元素的根元素上定义，并通过CSS的 --* 语法声明。可以有全局（出现在:root选择器）或局部作用域。火狐浏览器从2014年支持，谷歌浏览器和Safari是2016年。
  • CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

.container button  {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>

<script>
// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函数
function myFunction_get() {
  // 获取根的样式（属性和值）
  var rs = getComputedStyle(r);
  // 弹出 --blue 变量的值
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// 创建设置变量值的函数
function myFunction_set() {
  // 把变量 --blue 的值设置为另一个值（在这里是 "lightblue"）
  r.style.setProperty('--blue', 'lightblue');
}
</script>
  • css 典型断点，通常用于适配不同的屏幕尺寸和设备类型，以便在不同的视口宽度下呈现不同的样式。
@media only screen and (max-width: 600px) {  
  /* 手机断点的样式 */  
}  
  
@media only screen and (min-width: 601px) and (max-width: 900px) {  
  /* 平板断点的样式 */  
}  
  
@media only screen and (min-width: 901px) {  
  /* 桌面断点的样式 */  
}
  • 使用 JavaScript 获取和更改 CSS 变量
<style>
:root {
  --blue: lightgray;
  --white: #ffffff; 
  --font-s:13px;
} 

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size:var(--font-s);
}
 
</style>

<script>
// 获取根元素
var r = document.querySelector(':root');
 
// 创建设置变量值的函数
function myFunction_set() { 
  r.style.setProperty('--blue', 'lightblue');
  r.style.setProperty('--font-s', '20px');
}
</script>
</head>
<body>

<h1>使用 JavaScript 获取和更改 CSS 变量</h1>

<div class="container">
  <h2>Welcome to Shanghai!</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
   
</div>
<br>
 
<button type="button" onclick="myFunction_set()">使用 JavaScript 来更改 CSS 变量</button>
  • 视口（viewport）是用户在网页上的可视窗口。<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

posted on 2024-04-05 10:57  anjun_xf  阅读(6)  评论(0)  编辑  收藏  举报

导航

TOP