«

笔记-3-CSS补充

codeez 发布于 阅读：2465 笔记

编码时可参考凹凸实验室代码规范：https://guide.aotu.io/
类名：公共类使用_隔开单词，专属类使用-隔开单词。

meta标签有charset（字符编码）、http-equiv、name 三种属性。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

作用：

white-space 用于设置空白处理和换行规则。
text-overflow 用于设置文本溢出时行为，生效前提是overflow不为visible

CSS中的函数
比如常见的：rgb/rgba/translate/rotate/scale等
还有一些：var 定义变量 /calc 计算css值 / blur 毛玻璃效果 / gradient 颜色渐变

媒体查询，提供给开发者针对不同设备需求进行定制化开发的一个接口。

物理像素（又称设备像素）
屏幕的硬件属性，每个像素都是一个真实的物理像素点
逻辑像素（又称设备独立像素）
因为不同屏幕的物理像素不同，操作系统为开发者抽象出的概念，便于开发。
CSS像素
默认等于逻辑像素，可通过screen.width 和 screen.height 获取电脑的逻辑像素
DPR
device pixel ratio 设备像素比，物理像素 / 逻辑像素 在iPhone的高清显示屏中这个比例可能是2或者3。可通过window.devicePixelRatio获取

视口viewport，在浏览器中可以看到的区域就是视口，fixed就是相对视口定位的，在PC端中，不需要对视口进行区分，因为布局视口和视觉视口是同一个。
默认情况下，移动端的布局视口会大于视觉视口
在移动端可以将视口分为三种情况：布局视口、视觉视口、理想视口（概念来自ppk）
https://www.quirksmode.org/mobile/viewports2.html
默认情况下，一个在PC端的网页在移动端会按照宽度980px来布局内容（布局视口），然后为了显示整个页面，它会将整个网页缩放。
当布局视口=视觉视口时，就是理想视口

为什么在移动端使用@2x、@3x的图片？
有很多高分辨率的设备，比如iphone15promax，为了适应不同的像素密度，UI会提过多个版本的图像资源
@1x基本尺寸、@2x适用于DPR=2的设备、@3x适用于DPR=3的设备
可通过媒体查询来设置不同的图像。

/* 针对2x屏幕 */
@media only screen and (min-device-pixel-ratio:2){
    .box{  }
}
/* 针对3x屏幕 */
@media only screen and (min-device-pixel-ratio:3){
    .box{  }
}

-webkit-min-device-pixel-radio的问题：非标准特性，不建议生产环境使用。（MDN）
推荐使用另一个特性：resolution
resolution媒体特性是CSS标准中用于查询设备显示密度的推荐方式
它支持多种单位，我们通常使用dppx，1dppx就相当于1逻辑像素对应一个物理像素。

/* 针对2x屏幕 */
@media only screen and (min-resolution:2dppx){
    .box{  }
}
/* 针对3x屏幕 */
@media only screen and (min-resolution:3dppx){
    .box{  }
}

移动端适配的目的是让页面元素，能够根据屏幕的大小而动态改变自身的大小，让整体比例相同。
常用的一些方案：rem单位+动态html的font-size、vw单位、flex弹性布局

// lib-flexible
// 拿到屏幕宽度（理想视口）html.clientWidth
window.addEventListener("resize",function(){
    // htmlFontSize = 屏幕宽度 / 10
})

推荐使用webpack插件：postcss-pxtorem
记得把根元素字体大小配置成设计稿/10 例如75px 这样配合动态修改htmlFontSize就可实现与设计稿同样效果

10vw就等于75px，就可以省略lib-flexible的操作。
既然vw单位可用，那就不需要再使用rem单位。
推荐使用webpack插件：postcss-px-to-viewport-8-plugin
vscode插件需要配置设计稿尺寸（cssrem）

在开发底部tabbar时，手机底部可能存在“安全区域”。通过env(safe-area-inset-bottom)拿到，叠加底部tabbar高度。

什么是1px问题，如何解决，如何画出0.5px边框？
在移动端的设计稿中，通常宽度是750px，设计稿中的1px在375px的设备内，应该是0.5px
但是如果直接设置0.5px的话，一些设备特别是旧版本浏览器是不支持的。
目前常见的两种解决方式：
1.viewport+rem+div（淘宝）不推荐
2.伪类+transform（京东）推荐

.box {
    width:100px;
    height:100px;
    position:relative;
}
.box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:200%;
    height:200%;
    border:1px solid #000;
    transform-origin:0 0;
    transform:scale(0.5);
}

移动端的一些事件：Touch事件touchstart touchmove touchend touchcancel
手势库：hammers.js
touch事件点击穿透：原因就是touch事件会立刻触发而click会延迟100毫秒左右
解决方案，让遮罩层不要立即消失 ，消失的时候可以添加动画

click事件300ms延迟：原因：double-tap to zoom
双击缩放解决方案：
1 不使用click事件，把click事件中要处理的放到touchstart或touchend中做
2 touch-action:manipulation
3 写完整viewport，新的浏览器基本都支持了

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">

4针对老版本浏览器使用Fastclick库

css预处理器Less
@xxx 变量
& and符号 代表当前选择器父级
mixins，还可以像js一样传参，并有参数默认值

.b_border(@bWidth:2px){
    border:@bWidth solid #ccc;
}
.box {
    width:100px;
    height:100px;
    .b_border(4px)
}
.box2 {
    width:.box()[width] // 拿某一个属性，比如宽度
}

继承：与mixins相比，继承代码最终会转化成并集选择器

.bordered{
    border-bottom:1px solid #ccc;
}
.box {
    &:extend(.bordered)
}
// 转化成css代码后是并集选择器的状态
.bordered, .box {
    border-bottom:1px solid #ccc;
}

Less内置函数：

.box {
    color:color(red) // 将red转换成RGB的值
    width:convert(100px, "in") // 单位转换 px 转 in
    font-size:ceil(18.5px) // 数学 向上取整 19px
}

作用域，变量向上查找。
导入，和css一样的。

flex有两个重要的概念：

现象解释：flex容器中的item自动将高度拉伸至容器高度，因为容器默认align-items的值为normal，效果就等于stretch（伸展）

flex item 是受 flex container 属性的设置来进行控制和布局，flex item 不再严格区分块级元素和行内元素，flex item默认包裹内容，可设置宽高。
容器属性：
flex-direction 设置主轴方向，默认row。从左往右横向。其他可选row-reverse、column、column-reverse
flex-wrap 设置子元素是否可换行，默认nowrap，可选wrap、wrap-reverse
flex-flow 是上面两个属性的简写，任意顺序并且都可省略。
justify-content 设置子元素在主轴上的对齐方式，默认flex-start和主轴开始处对齐，可选flex-end、center、space-between、space-around、space-evenly
align-items 设置子元素在交叉轴的对齐方式，具体可选参数可见图：

align-content 设置多行子元素在交叉轴上的对齐方式，与justify-content类似

子元素属性：
order 设置item的顺序，可设置任意整数，越小越靠前
align-self 设置单独子元素在交叉轴的对齐方式，可覆盖容器的align-items
flex-grow 设置子元素如何拉伸，当在主轴上有空余空间时有效。
flex-shrink 默认值1，决定子元素如何缩小，当子元素在主轴上的宽度超过了主轴长度才有效。值为0不压缩
flex-basis 用于设置元素在主轴方向上的基础尺寸，默认auto
flex 是上方三个属性的缩写。

grid 概念
grid container 容器
grid item （grid cell） 容器的直接子元素（又称单元格）
grid line （网格线）
grid track 两条相邻网格线之间的空间
grid area 由四条网格线包围的空间，比单元格的范围更广。

grid container 常用属性：
display
grid-template-columns
grid-template-rows
grid-template-areas

fr是分配剩余可用空间 auto先于fr计算，获取必要的最小空间repeat()简化重复的值


前端

请先 登录 再评论