【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结(移动端适配一)

使用meta标签设置视口宽度,制作适配不同设备宽度的网页

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

        viewport:视口

        width=device-width:视口宽度=设备宽度

        initial-scale=1.0 缩放倍数(1倍表示不缩放)

百分比布局

`                流式布局(宽度自适应,高度固定)

        flex布局

                浏览器提倡的布局模型,避免浮动脱标,使盒子横向排列

                父元素(弹性容器)添加display:flex,子元素(弹性盒子)可以自动的挤压或者拉伸

                justify-content调节主轴对齐方式

                align-items调节元素在侧轴的对齐方式  align-self:单独控制某个盒子

                flex属性修改盒子的伸缩比:占用父盒子的剩余尺寸

                flex-direction:改变元素排列方向

                        row(行,默认)column(列)row-reverse(行,从右向左)column-reverse(列,从下向上)

                弹性盒子换行:flex-wrap:wrap

适配方案一:rem  实现在不同宽度的设备中,网页元素尺寸等比缩放效果

               使用媒体查询设置差异化CSS样式

                引入:flexible.js(根据不同的视口宽度给网页中html根节点设置不同的font-size)

                1rem=1HTML字号大小

!!!CSS不支持计算写法:px转化rem单位时,使用Less实现

Less语法:CSS预处理器 后缀是.less

                1.Esay Less vscode插件,less文件保存自动生成css文件

                2.加减乘直接书写表达式,除法需要使用小括号或者./

                3.less嵌套写法生成后代选择器,&符号不生成后代选择器,表示当前选择器,通常配合伪类或者伪元素使用

                4.可以提取属性值存储到一个容器,设置属性值为这个容器名,调用这个属性值名,做到统一使用,统一修改

                        提取:@fontColor:#444444使用:color:@fontColor

                5.@import '文件路径'(import后面有空格)less文件可以省略后缀

                6.修改导出CSS文件的位置

                        1.设置->搜索EasyLess->在setting.json中编辑->添加代码(必须是双引号)

                               "less.complie":{ "out":"CSS文件存储路径"}

                        2.Less文件第一行添加

                                //out: css文件夹路径/

                        3.禁止导出://out:false

        下一节介绍vw/vh