在手机上看h5页面
要在同一网络下，在命令行下输入ipconfig，找到ipv4替换网址前面的部分，也可以在草料二维码上生成二维码用手机扫。
获取视口宽度
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);
AI 代码解读
获取屏幕尺寸，或者获取屏幕的分辨率,有兼容问题
console.log(screen.width);
AI 代码解读
禁止缩放
<meta name ="viewport" content= "width=device-width, initial-scale= 1,
user-scalable= no, maximum-scale= 1,minimum-scale= 1 "/>
AI 代码解读
多行文字省略
overflow: hidden;
text-overflow: ellipsis;
display: -webkit- box;
-webkit-line-clamp: 2;
-webkit- box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
AI 代码解读
flex项目
默认情况下，水平方向的是主轴，垂直于主轴方向的是交叉轴
order
- 定义了Flex项目的排列顺序
- 数值越小，排列越靠前，默认为0
flex-grow
- 定义了Flex项目在 主轴方向 上的放大比例，默认为0，即如果存在剩余空间，该项目也不放大
- 如果有的Flex项目有flex-grow属性，有的项目没有flex-grow属性，但有width，有flex- grow属性的项目将等分剩余空间，如果项目宽度设置了200px，则会减去200px将剩余空间分完后再加给他
flex-shrink
- 定义了Flex项目在主轴方向上的缩小比例，默认为1,即如果空间不足，该项目将缩小
- 如果一个项目的flex-shrink属性为0,其他项目都为1，则空间不足时，前者不缩小
flex-basis
- 定义了在分配多余空间之前，Flex 项目占据的主轴大小(main size)
- 浏览器根据这个属性，计算主轴是否有多余空间
- 它的默认值为auto,即项目的本来大小
- flex-basis：200px 即这个项目在主轴上占200px
flex
- 是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto flex: flex-grow flex-shrink flex-basis
- 该属性有两个快捷值: auto(1 1 auto)和none (0 0 auto)
align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
- align-self: auto (默认值)|flex-start | flex-end | center|stretch| baseline
- 即容器设置了align-items属性，能够被align-self属性覆盖，有项目自己的对齐方式
flex容器
flex-direction
- 决定主轴的方向(即Flex项目的排列方向)
- row(默认)row-reverse(从右向左)column(从上向下)column-reverse(从下向上)
flex-wrap
flex-flow
- 上面两个属性缩写flex-flow: row wrap
gird容器
display
gird:项目元素是块级元素
inline-gird:项目元素是行内元素grid-template-rows，grid-template-columns属性
grid-template-rows定义每一行的行高
grid-template-columns定义每一列的列宽
- 固定数值
- 百分比%:容器宽高的百分比(不包括容器内边距和边框)
- fr分配剩余空间
- auto先于fr计算，获取必要的最小空间
auto 1fr 150px - repeat() grid-template-columns: repeat(2,150px 150px);
grid-template-columns: 150px 150px 150px 150px; - 当单元格的大小固定，容器大小不确定时,如果希望每一行(或每一列) 容纳尽可能多的单元格,可以使用auto-fill自动填充
grid-template-columns: repeat(auto-fill, 150px); - minmax(min, max):取值>=最小值，并且<=最大值
grid-auto-flow: row (默认值)| column| row dense| column dense;
row项目按行优先排列column按列优先排列 row dense在稍后出现较小的项目时，尝试填充网格中较早的空缺
grid-auto-grid-auto-columns
grid-auto-rows定义浏览器自动创建的多余网格的行高
grid-auto-columns定义浏览器自动创建的多余网格的列宽
gap
row-gap设置行间距
column-gap设置列间距
gap是row-gap和column-gap的简写形式
grid-template-areas
定义区域
如果某些区域不需要利用，则使用"点"(.)表示
grid-template-areas:
'a . a'
'd e f'
'g g g;
区域的命名会影响到网格线。每个区域的起始
网格线，会自动命名为区域名-start,终止网格
线自动命名为区域名-end
align-content justify-content place-content
align-content设置整个内容区域的垂直位置(上中下)
justify-content设置整个内容区域的水平位置(左中右)
place-content是align-content和justify-content的合并简写形式
align-items justify-items place-items
align-items设置项目(单元格)的垂直位置(上中下)
justify-items设置项目的水平位置(左中右)
place-items是align-items和justify-items的合并简写形式
gird项目
grid-column-start，grid-column-end，grid-row-start，grid-row-end
- number数字，从第几个网格线开始，到第几个网格线结束
- name通过名字来引用一个命名的网格线
- span number:该网格项将跨越所提供的网格数量
合并形式
grid-area
指定项目放在哪一个区域还可用作grid-row-start、grid-column-
start、grid-row-end、 grid-column-end 的合并简写形式，直接指定项目的位置
align-self，justify-self，place-self
vw
px2vw插件
设置上设计图的大小，设置完重启
rem
px2rem，设置 html 内font-size大小
vw+rem布局
将html中的font-size单位改成vw，10px是原来rem的html的大小
单行、多行文字省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clampt: 2;
-webkit- box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
AI 代码解读
