整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是大澈！
本文约 700+ 字，整篇阅读约需 1 分钟。
每日分享一段优质代码片段。
今天分享一段 CSS 代码片段，使用 CSS 设置网页全屏背景图片，很简单。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 适用于旧版 WebKit 浏览器 */
-moz-background-size: cover; /* 适用于旧版 Firefox 浏览器 */
-o-background-size: cover; /* 适用于旧版 Opera 浏览器 */
}分享原因
这段代码展示了如何使用 CSS 设置网页全屏背景图片，使其在不同浏览器中都能完美适应屏幕尺寸。
这对于创建具有视觉吸引力且兼容性良好的网页非常重要。
代码解析
1. background: url('images/bg.jpg') no-repeat center center fixed;
background：简写属性，用于设置所有背景属性。
url('images/bg.jpg')：指定背景图像的路径。
no-repeat：背景图像不重复显示。
center center：背景图像在水平方向和垂直方向都居中显示。
fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。
2. background-size: cover;
background-size: cover：使背景图像按比例缩放，以完全覆盖背景区域。这意味着图像可能会被裁剪以适应容器。
3. 浏览器前缀的使用
-webkit-background-size：适用于旧版 WebKit 浏览器（如旧版 Safari 和 Chrome）。
-moz-background-size：适用于旧版 Firefox 浏览器。
-o-background-size：适用于旧版 Opera 浏览器。
这些浏览器前缀用于处理旧版浏览器的兼容性问题。虽然现代浏览器大多已经支持标准的 background-size 属性，但在代码中加入这些前缀可以确保在老旧浏览器中也能正常显示背景图片。
- end -
务8：全屏模式的切换。
这张就是第八，第八小姐就是讲关于全屏模式的切换。回到页面，希望有个按钮，一点全屏娱乐模式，这一点就切换回来。可能我个人不太喜欢这种模式，但有的人会用，还是把它设计进去。
然后就在这个地方加一个图标，有空再找一下。找了一个图标，就找这个。jump through screen one，这有了吗？有了，还挺好。然后就稍小了一点，再给它大一点，size，就不要说是二十，可以。点它，现在没效果，来做这个效果。
首先给它定一个变量叫is war screen，是不是全屏的？它肯定是响应数据了，i e f，它不是默认，当然响应数据这边可以给它添类型，比如它是birch，填birch。如果它不是，还找一个相对的，跟它相反的按钮，收回来的按钮，就用这个。
off for screen one，就这个，给它来复制一下，把它放松，就是衣服regan in the first three，如果它真的，就显示上面的，否则就显示下面的。来看一下，这边有一个方法，就这样可以，可能还做其他的，记得就给它定一个top切换螺丝功能，它是一个，然后再调整这个方法就行了。
就要投screen，点，没效果，为啥没效果？是不是点错了？这边点这上面，再说下面一个，放到枪上，点，看有切换效果了。怎么样给它切换？这个是节食里面固定的方法，如果它的值，直接给它切换，就是document，the element，点a request，press greet plug，就是全屏切换。
这里切换了，这点没效果只按a xe，所以这边也不对，所以希望它变成这个时候就把它缩回来，这边就要做一个判断了，就是来判断它是不是已经缩放了，如果它已经是展开了，就把它缩回来，也是，这个就退出，否则就把它删远，就简单的删远，删除就可以了。
试一下，点，点，回来了，点，点，再配合原来的一点，就全屏显示了，舒服了，点回来。这一章就讲完了，就把页面布局都弄好了，包括动态生成菜单页，浏览历史页，面包穴导航，把整个布局就全做好了。
下一张开始做具体业务了，首先叫做用户的登录，注册新用户，还有一个重置密码。这节课就讲到这里，拜拜。
端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍
在这之前，需要先对几个概念进行普及介绍
基本概念
（以下概念读起来可能有些晦涩，如果看不懂也没关系）
像素
它不是自然界的物理长度，指基本原色素及其灰度的基本编码。
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。
后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。
物理像素
它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。
设备独立像素
我上一张图，你就会理解什么是设备独立像素
就是我们开发过程中使用的css中的px
设备像素比（device pixel radio）
设备像素比 = 物理像素 / 设备独立像素，单位是dpr！（device pixel radio）
Retina屏幕
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。也被称为视网膜显示屏 ——百度百科
因为Retina屏幕的出现，在pc端默认情况下，css中的1px等于1物理像素，但在移动端1px不一定等于1物理像素，比如说iPhone的设备独立像素是375 667，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的，不同的是1px所对应的物理像素个数是不一致的。
在普通屏幕下，1px 对应 1个物理像素(1:1)。 在Retina屏幕下（dpr=2），1px对应 2x2个物理像素(1:4)。
你会发现，在移动端开发中使用了图片（img标签），2倍图要比1倍图清晰，就是这个缘故
px
默认情况下像素px是相对于屏幕分辨率而言，比如说我们的屏幕分辨率是1440 X 900，说的就是像素1440px X 900px；
这里会遇到另一种情况
### 浏览器缩放
缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素)，就是在屏幕分辨率不变的情况下，用户对浏览进行了缩放
强调一点，用户的缩放行为是对浏览器进行的，缩放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不论你怎么缩放当前页面，屏幕分辨率都不会改变
我们知道在移动端可以在一定程度上控制用户的缩放行为，也可以禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content属性值 :
但是在pc端就麻烦了
windows：
mac：
由于浏览器菜单栏属于系统软件权限，没发控制，我们可以通过js控制ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况
em
本人在实际开发过程中并没有使用过em单位，但是后面要说的rem是基于em的，所以，对em进行简单介绍
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
看个栗子吧
<body>
<style>
html {
font-size: 50px;
}
.my-div {
width: 100%;
height: 500px;
margin-top: 50px;
background-color: gray;
font-size: 40px;
}
.my-div .parent-font {
font-size: 30px;
}
.my-div .parent-font .child-font {
font-size: 0.5em;
}
</style>
<div class="my-div">
<p class="parent-font">
我是父级文字
<span class="child-font">我是子级文字</span>
</p>
</div>
</body>
html代码中，
第一级，html的 font-size: 50px;
第二级，my-div 的 font-size: 40px;
第三级，parent-font 的 font-size:30px;
第四级，child-font 的 font-size: 0.5em;
我们通过浏览器查看，发现第四级的fong-size为15px；
我们取消第三级parent-font 的字体大小
我们通过浏览器查看，发现第四级的fong-size为20px；
当我们取消第三级font-size后，第三级的字体大小为40px；
所以我们说em的字体大小不是固定的，em的大小取决于父级的字体大小
当父级的字体大小为20px，子级的1em就是20px
当父级的字体大小为30px，子级的1em就是30px
那么说font-size存在着继承父级的特点
我们在第一级html中设置font-size，第二级继承第一级，第三级继承第二级，第四级继承第三级，以此类推
每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。
那么如果是em的都继承自同一个地方，是不是可以解决很多问题呢？
这时候rem出现了
rem
rem 是CSS3的一个相对单位（root em，根em）
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
只要html的font-size大小不变，1rem所代表的font-size大小就不会变，rem只取决于html的font-size
rem解决了哪些问题
移动设备的宽度是各种各样的，每个设备的dpr也不同，换句话说就是不同设备每一行的物理像素数不同，能显示的css的px数也不同，
如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)，
当我们换另一个宽度是414px的设备（iPhone6Plus）时，这个宽度375px的div就无法铺满这个屏幕，同样的当换一个iPhone5（320px），又会出现滚动条，安卓机的宽度更是五花八门，使用media媒体查询不靠谱，因为它不能覆盖所有的机型宽度
我们之前说rem的大小是相对于html的font-size的，如果html的font-size根据不同设备的宽度做动态计算，问题就会得到解决
我们写页面都是根据UI设计稿来做的，我们假设UI设计稿的宽度是750px（750px是常规宽度，当然也可以是640px或是其他宽度，但是整个项目，宽度必须统一），唯一不变就是就屏幕宽度，我们的html的font-size（rem）只取决于设备宽度
于是
document.documentElement.style.fontSize = 100 * ( document.documentElement.clientWidth / 750) + 'px'
html的font-size：document.documentElement.style.fontSize
设备的宽度：document.documentElement.clientWidth
750：UI设计稿的宽度
为了方便计算我们将font-size x 100，方便计算（乘100不是必须的，我接触过一些项目就不是乘以100，但是UI设计稿中使用了sketch做了动态计算，但我还是建议乘100，不然遇到psd的设计图就很麻烦了）
对上面的js做些完善
const fontFun = function () {
let docEl = document.documentElement
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function () {
let clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
}
if (!document.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
window.addEventListener('pageshow', recalc, false)
document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
fontFun
}
对以上代码不做过多解释
也可以这样写
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
win.addEventListener('pageshow', recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是继承自html的font-size，但是小程序中没有html，那怎么办呢？
rpx
我不基于html的font-size了，我基于一个别的值就行了，你也不需要计算这个值，我给你计算了，这就是rpx。
最终的效果就是，你开发时在iphon6的设计稿上量了多少px，就写多少rpx就行了，完美适配，perfect！
*请认真填写需求信息，我们会在24小时内与您取得联系。
