calc计算函数、移动端布局
一、calc计算函数
/* 注意：在使用calc计算时，+- * / 符号的两边必须加计空格 calc 函数 完全遵循数学运算 先乘除在加减 先算括号里边的...*/calc是css3新增的，有兼容问题 兼容ie9以上和标准浏览器（以后电脑的兼容问题不存在）兼容问题存在在手机上，手机浏览器是只有火狐14以上才支持，其他所有浏览器都不能用
width: calc(100% - 200px - 300px);height: calc(100% - 220px);高度使用100%，需要给body和html都设置100%才能用width: calc(200px + (40px - 20px) * 3);参与+ -运算的加px %单位的，乘除 只能是数字 不加单位
二、移动端布局
手机屏幕越大，元素越大
手机屏幕越小，元素越小
-
百分比
-
vw、vh
vw viewport width 视口宽度 vh viewport height 视口高度 任何屏幕的宽度的100% 是100vw 任何屏幕的高度的100% 是100vh /* 插件名字 px2vw px自动转换vw安装完插件之后，需要重启vscode编辑器*/width: 18vw;height: 18vw;background-color: red;font-size: 3.4667vw;padding-left: 1.3333vw;margin-left: 2.6667vw;
-
响应式
写一套代码 既能适应电脑，又能适应手机，还能适应pad
根据手机屏幕宽度的范围去划分
同时借助 媒体查询
手机尺寸
320-400
400-500
500-600
/* 在320-400之间的屏幕大小div的大小 就是100px 100px*/@media screen 320-400{div{width:100px;height:100px;}}/* 在400-500之间的屏幕大小div的大小 就是112px 112px*/@media screen 400-500{div{width:112px;height:112px;}}
@media screen 500-600{div{width:124px;height:124px;}}
-
rem
2.1 rem布局的步骤
第一：视口的设置
name="viewport" 视口 眼睛看屏幕的范围 比如屏幕是375 视口是375width=device-width 宽度等于设备宽度initial-scale=1.0 初始缩放比例是1倍（保持原样）maximum-scale=1.0 最大缩放比例是1倍 （放不大）minimum-scale=1.0 最小缩放比例是1倍 （缩不小）user-scaleble=no 禁止用户缩放
第二：动态修改html标签的font-size的值 （rem布局的原理）
第三：在页面中的单位 直接使用rem单位
量的大小是100px 就是1rem 量的大小是18px 就是0.18rem 量的大小是25px 就是.25px
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！