1.document.ready跟window.load区别?
1.概念
ready:表示文档解构已经加载完成,不包括图片、文件等其他信息。
load: 是onload, 指的是页面里面文档,图片,文件都已全部加载完成。
一般情况,一个页面响应的顺序是:域名解析→加载html→加载js、css→加载图片、文件等其他信息。
所以document.ready触发的位置是在加载js、css完成跟还未加载图片文件其他信息之间的步骤,而document.load是在页面全部加载完图片文件所有信息之后触发的。
2. 生否会覆盖
window.load方法如果编写多个,后面会覆盖前面的,只会订阅一次
document.ready编写多个后,浏览器会根据出现的顺序依次去执行
3. 代码使用
$(document).ready(function() {
// console.log("ready加载已完成")
})
window.onload = function() {
// console.log("onload 加载已完成")
}
4. load可以对图片进行操作,当图片加载完成之后执行,用法如下:
document.getElementById("imgId").onload = function() {
// console.log("图片加载已完成")
}
- flex定宽原理(flex:1)
1.使用方法
一般左边固定宽度,右边自适应宽度用flex:1实现。代码逻辑就是给父元素设置display:flex,使内部子元素一行显示,然后给需要自适应宽度的子元素添加flex:1样式
2.原理
子元素设置flex:1样式后,它的宽度(width) = (父元素的宽度 - 同级别dom未设置flex:1的dom元素宽度之和 ) / 同级别设置flex:1样式的dom元素个数
- 媒体查询
1.介绍
媒体查询是css3提供的新特性,用户可以根据不同分辨率来实现不同的样式效果,所以媒体查询主要是做响应式布局的。
响应式布局是什么呢?简单来说,就是在不同的屏幕上显示不一样的效果,比如在超大屏幕上面,避免空间浪费我们可以多放一些东西,在屏幕比较小的时候,我们可以隐藏一些东西,因为屏幕太小了,信息展示多了反而显得过于臃肿。不同屏幕有不同的相应,即为响应式布局
2.观察浏览器页面分辨率方式,如图:
![开发者工具获取body的尺寸,就是当前分辨率的值](https://img-blog.csdnimg.cn/6f117427de8b462a8a93fe52d180ed45.jpeg#pic_center)
也可以通过js window.screen对象获取屏幕宽高
3.媒体查询写法
( ps: max-width最大宽度,也就是小于等于的时候,
min-width最小宽度,也就是大于等于的时候 )
1. 当,是屏幕设备,并且,最大宽度不超过480px的时候,让文字的颜色变成绿色,代码如下:
<style>
@media screen and (max-width: 480px) {
div {
color: green;
}
}
</style>
解析@media screen and (max-width: 480px)写法,意思如下:
@media: 使用媒体查询
screen: 屏幕设备(比如电脑手机什么的),也可以不写,不写的话,默认就是屏幕screen 设备,不写screen 语法如下:
@media (max-width: 480px) { 相应css语句 } 效果是一样的,只不过省去默认值罢了
and: 且 的意思,and后面一般会跟限定条件,表示在什么条件下才会触发相应的媒体查询的样式。可以写多个and,表示多个条件的意思,举例子如下:
@media screen and (max-width: 480px) and (min-width: 360px) { 相应css语句 }
上述案例的意思是:当为屏幕设备的时候,且屏幕宽度大于等于360像素,小于等于480像素的时候,执行相应的css语句
! 条件的话用括号来包裹,括号里写上相应的条件语句,实现对应样式效果的语句
2. 三个逻辑运算符 and、 not 、only(使用少,浏览器也有兼容问题,不做说明)
1. and已解释如上,意思就是可以添加多个条件。
2. ont表示取反的意思,字符加在@media后面,如下图代码:
<style>
/* 小于等于360px的变成绿色 */
/* @media screen and (max-width: 360px) { */
/* 加上not取反就是表示 就变成大于等于360px的变成绿色加粗字体了 */
@media not screen and (max-width: 360px) {
div {
color: green
}
}
</style>
4.补充 (或) 关键字(使用逗号 , 隔开即可):
如果我们有这样的一个需求:当屏幕的宽度小于360px或者屏幕的宽度大于480px的时候,才让字体变成绿色样式,此时,我们就需要使用或的语法,代码如下:
<style>
@media
screen and (max-width: 360px) , /* 多个或的条件使用逗号隔开就行了 */
screen and (min-width: 480px) {
div {
color: green;
font-weight: bolder;
}
}
</style>
ps: 这边使用逗号方式跟上面直接使用and的写法区别在于,上面之恶后面跟and的表示获取的是当处于a尺寸到b尺寸之间的值时触发的样式,而逗号隔开的这种,表示的是,当小于a尺寸大于b尺寸的值,也就是非处于他们之间位置的尺寸而触发的样式