0
点赞
收藏
分享

微信扫一扫

移动端的适配整理

 

 

一、移动端适配


  方法一:viewport自适应屏幕宽度

      在html中创建meta标签:页面的宽度等于屏幕的宽度。

 

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

 

  方法二:框架搭建页面

  1. bootstrap  基于jQuery的响应工具,适用于移动端、PC、Pad等
  2. ElementUI(PC端)、MintUI(移动端)  基于vue组件库开发

二、移动端问题 

 

  (1)、1px 边框

    方法一:伪元素 + transform 实现


.scale-1px{
position: relative;
}
.scale-1px::after{
content: '';
position: absolute;
bottom: 0;
left:0;
right:0;
border:1px solid red;
transform: scaleY(0.5);
}


    方法二:view + rem 实现

  

  (2)、移动端布局方式

      方法一:响应式布局

          流式布局 + 媒体查询

      方法二:弹性布局

          flexbox 

      方法三:rem 布局

      


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<!--移动端的视口配置 + rem的设置 : 建议使用内联js -->
<script>
//设置适口及缩放比例,目的:实现像素1:1还原
var ratio = 1 / (window.devicePixelRatio||1); // window.devicePixelRatio:浏览器的像素比。
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ratio+',minimum-scale='+ratio+',maximum-scale='+ratio+',user-scalable=no" />')
//设置html字体大小
var size = document.documentElement.clientWidth/7.5; //以750尺寸计算
//要设置的html的font-size是100px,即1rem
document.getElementsByTagName('html')[0].style.fontSize = size + 'px';
</script>
</head>
<body>
code...
</body>
</html>




举报

相关推荐

适配移动端基础

移动端rem适配

【css】移动端适配

vue移动端适配

CSS移动端适配

进行移动端rem适配

vue移动端页面适配

flutter-移动端适配

0 条评论