viewport
meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性：
content="width=device-width 表示宽度是设备屏幕的宽度
initial-scale=1.0 表示初始的缩放比例
minimum-scale=0.5 表示最小的缩放比例
maximum-scale=2.0 表示最大的缩放比例
user-scalable=yes 表示用户是否可以调整缩放比例
物理像素&物理像素比
1、物理像素是指屏幕显示的最小颗粒，是物理上真实存在的。也就是我们说的分辨率；
2、在开发中1px不一定等于1个物理像素，在PC端 1px == 1个物理像素，但是在移动端就不是相等的关系了
3、开发尺寸
image.png
单独开发移动端的页面 和 响应式兼容pc和移动端
1、移动端初始化样式推荐使用 normalize.css
移动端技术解决方案
image.png
在 移动端写a标签会有 按下高亮的问题，pc端不会有
-webkit-tap-hightlight-color: transparent
media
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
rem
(function() {
function resize() {
// 定义一个基础值
let baseFontSize = 100;
let designWidth = 750; // 设计稿的宽度
let width = window.innerWidth; // 屏幕的宽度
let currentFontSize = (width/designWidth)*baseFontSize;
document.querySelector('html').style.fontSize = currentFontSize + 'px';
}
window.onresize = function() {
resize()
}
document.addEventListener('DOMContentLoaded',resize())
})()
