css3使用scale适配屏幕，css3如何实现屏幕自适应

前端大屏项目自适应(个人笔记)

1、以React的写法为例 监听window的resize事件最好加个节流函数debounce 然后一个简单的组件就封装好了 样式文件index.less 只要把页面放在这个组件中，就能实现跟大厂们类似的效果。

2、什么是rem？rem是一个相对单位，简单来说，当你的前端工程师用rem作为单位标记一个按钮的宽高时，按钮的大小就会根据屏幕尺寸做自适应。rem除了标记尺寸还可以标记间距，设计们只需要说明好定位方式就可以了。

3、首先，在网页代码的头部，加入一行viewport元标签。

相关问答

Q1: CSS3布局方式有哪些?

order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列 flex-grow，决定了item的放大比例，默认为0不进行放大。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。 但flex 的缺点在于，它不支持低版本的 IE 浏览器。

常见的页面布局方式：表格布局、DIV+CSS布局、框架布局。表格布局：用来显示较多的数据，如OA系统、ERP系统或CRM系统。（一般用在局部）DIV+CSS布局：相对来说最灵活的布局方式，完全实现内容和样式的分离。

传统的布局方案是基于盒模型，依赖于display：block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。

-Grid布局图中 蓝色的线不会出现在实际的网页中。Grid布局应用很广泛，最简单的例子就是内容的分栏显示。

Q2: css怎么让一张图片适应任何屏幕大小的电脑平铺?

打开代码编辑器。html代码的编写。css代码的编写。js的代码编写。在移动端手指触摸轮播图切换效果代码的编写：也可以使用bootstrap框架直接引入css文件。

使用“CSS 样式定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。加了background-repeat：repeat-x；之后，背景现在只在X轴即横向进行了平铺操作，纵向并没有进行平铺。

您好！css设置背景图片全屏，如果只是将其当做一张图片显示，可以通过css控制。超大图片，引入进来即可根据大小缩放。

关于css3使用scale适配屏幕和css3如何实现屏幕自适应的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。