元素大小随屏幕宽度改变平稳变化
rem
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 1920 分成100份 */
html{
font-size:19.20px; /*默认以设计稿为基准*/
}
@media only screen and (max-width: 1366px) {
html{
font-size:13.66px;
}
}
@media screen and (max-width: 1200px) {
html{
font-size: 12px;
}
}
/* 大屏幕 */
@media only scree and (min-width:1200px){
}
/* 中等屏幕 */
@media only screen and (min-width:992px) and (max-width:1199px) {
}
/* 小屏幕 */
@media only screen and (min-width:768px) and (max-width:991px) {
}
/* 手机端显示 */
@media only screen and (max-width:767px) {
}
</style>
<body>
<h3>Array</h3>
<div style="width: 10rem;height: 5rem;border: 1px solid red;">
</div>
<span style="font-size: 2rem;">test</span>
</body>
</html>
<script type="text/javascript">
// 获取分辨率
// window.screen.width window.screen.height
var os = function () {
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();
// pc时加载一套页面
if(os.isPc){
// location.replace("http://");
console.log(os)
}
// 移动端时加载另外一套页面
if (os.isAndroid || os.isPhone) {
// location.replace('http://');
console.log('移动端')
} else if (os.isTablet) {
// location.replace('http://');
console.log('移动端')
}
</script>
vw vh？
vm、vh是基于视口的布局方案，所以meta元素的视口必须声明
移动端前端适配方案
postcss
tailwindcss
