第三天移动开发学习之旅
发表时间: 2024-04-23 09:38
视口
如果没有视口标签，那么网页的宽度就不会匹配设备的逻辑宽度。
二倍图
可以在像素大厨里选择倍数，使其宽度标识成375，就表示切回到了1倍，750表示当前是二倍。
rem
如果设置之后宽高是150,90，因为字号是30，所以是30*5rem,30*3rem.
媒体查询配合rem
rem配合flexible布局
flexible.js
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
rem-移动适配
.box {
width: 100 + 20px;
width: 100 - 80px;
width: 100 * 2px;
// 除法 / → (计算表达式) 或 ./ → 推荐（）
width: (68 / 37.5rem);
width: 29 ./ 37.5rem;
// 如果表达式有多个单位，最终css里面以第一个单位为准
height: (29px / 37.5rem);
}
less嵌套
less变量
// 1. 定义变量
@myColor: green;
// 2. 使用变量
div {
color: @myColor;
}
p {
background-color: @myColor;
}
a {
color: @myColor;
}
less导入导出
导出可指定css文件的生成位置及名称。
如图指定了css的生成位置为上一级目录css里。
准备工作
// out: ../css/
指定了css生成位置。
@import './base.less';
或者
@import './base';
引入base.less到index.less
基本页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极速问诊</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<script src="./js/flexible.js"></script>
</body>
</html>
极速问诊-头部
index.less
// out: ../css/
@import './base.less';
//定义变量 这样就不要到处除以37.5rem
@rootSize:37.5rem;
// 头部
header{
display: flex;
justify-content: space-between;
// 设置左右15间距
padding: 0 (15/@rootSize);
// 设置高度
height: (44/@rootSize);
line-height: (44/@rootSize);
.icon-left{
font-size: (22 / @rootSize);
}
h3{
font-size: (17 / @rootSize);
}
.note{
font-size: (15 / @rootSize);
color: #2CB5A5;
}
}
效果如下
极速问诊-banner区域
.banner{
margin-top: (30.5/@rootSize);
margin-bottom: (33.5/@rootSize);
text-align: center;
img{
width: (240 / @rootSize);
height: (206 / @rootSize);
margin-bottom: (18 / @rootSize);
}
p{
font-size: (16 / @rootSize);
span{
color: #16C2A3;
}
}
}
效果如下
页面html
极速问诊-问诊类型
效果如下
鲁公网安备37020202000738号