如何将获取的屏幕宽度之后传给css

Posted 2023-04-17

css不行的，如果用css表达式可以取到页面宽度和高度，但不兼容非ie浏览器。这个还是应该用js取：
document.documentElement.clientWidth：取得浏览器页面可视区域的宽度document.documentElement.clientHeight：取得浏览器页面可视区域的高度
screen.width：取得屏幕宽度
screen.height：取得屏幕高度
screen.availWidth：取得除任务栏外的屏幕宽度
screen.availHeight取得除任务栏外的屏幕高度
级联样式表是一种用来表现html（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 参考技术A

@media

@media (min-width: 768px)
/*屏幕最小为768px时调用括号里的属性*/
@media (max-width: 767px) 
/*屏幕最大为768px时调用括号里的属性*/
@media (min-width: 768px) and (max-width: 991px) 
/*屏幕的大小在 768和991之间时调用括号里的属性

要记得，css下面的class会覆盖上面的熟悉，好好利用就能实现很多东西哦～

希望有帮到你…喵…

参考技术B 用什么获取的，js吗
jquery插件的css属性赋值方法
$('.aaa').css('width','100px');

css 父节点包含宽度的“分解”以获取页面的完整屏幕w /这个漂亮的实用程序类

// Source: https://twitter.com/Una/status/951519740840873984

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}