CSS移动端

1.meta

2.2倍图的问题：

因为1px要对多个物理像素，所以会造成图片模糊问题。如我们需要50*50px的照片，我们要放100x100px的照片，再在CSS中调整宽和高度为50x50(显示100x100px，做到不失真的效果) （h w;只写一个参数就是宽度，高度等比例缩放；百分比是相对于父盒子来说；cover覆盖整个div盒子，可能会有显示不全的问题；contain高度和宽度等比例拉伸，一侧铺满盒子就不再拉伸）

background-size:h w;

3.CSS3盒子模型

box-sizing:border-box;//不包括border和padding

4.流式布局

宽度写百分比的形式。写min-w,max-w

5.flex布局

通过给父盒子添加flex属性，达到控制子元素的位置和分布，子元素可以在里面横向排列或者纵向排列。

父盒子主要的属性

flex-direction：默认row

justify-content:设置主轴的排列方式，默认flex-start

补充：space-evenly:可以使项目与项目之间以及项目与边框之间间隔相等

flex-wrap

在flex布局中，默认子元素是不换行的，如果装不开，则会压缩子元素的宽度

flex-wrap:nowrap;//默认  改成warp就是换行

align-items:设置单行时的侧轴分布方式（有h时，拉伸无效）

align-content:设置多行时的侧轴分布方式

flex-flow简写方式

7.子盒子的属性

flex:数字

占剩余空间划分的份数，不是分几份哦

align-self

align-self:xxx;//设置指定元素在侧轴上的排列方式，默认auto,表示继承父元素align-items属性

order

order：数字；默认是0，控制元素的排列顺序，可为负值，越小越靠前

8.背景色渐变

9.rem布局

em是说是父元素字体大小的几倍；rem是相对于html元素字体大小

10.媒体查询

习惯从小到大写 min-width min-width有重叠性可覆盖，把pc端的写在开头：html{font-size:xxpx;} @media screen and (max-width:800px){body{}}//小于等于800px下的样式，条件用and连接

11.less

less是CSS的扩展语句，定义变量名： @变量名:值； 严格区分大小写，开头不能是数字，不能包含特殊符号

less嵌套：子元素选择器直接写到父元素里就好；后代选择器相似

伪元素选择器:

div {
&::after{
content:'';}
a{
color: #000;
&:hover{
color: blue;
}}}

less中可以直接进行+ - * /运算（除法需要加括号），运算符左右两边用空格隔开，两个数参与运算，第一个有单位就行；有不一样的单位时，以第一个单位为准

在less中引入另一个less:common时：

@import "commom;"//可以不用加后缀

12.rem适配方案

页面元素的rem值=页面元素值(px)/html font-size字体大小

13.响应式布局

14. 框架开发

JS移动端

1.触屏touch时间 2.触摸事件对象(TouchEvent) 重点记住targetTouches 3.监听过渡事件结束

ul.addEventListener('transitioned', function() {})

4.classList 应用 5.click延时解决方案 6.轮播图插件www.swiper.com.cn 拷贝swiper-bundle里的js和css文件到项目文件夹中还有boostra框架

gird布局

父盒子属性

display:gird

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

rid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

初学移动端CSS.JS的小记录