標籤：pixel red nsf char init none bootstrap 方法 har
一、移動端適配
方法一：viewport自適應螢幕寬度
在html中建立meta標籤：頁面的寬度等於螢幕的寬度。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
方法二：架構搭建頁面
二、移動端問題
（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>
移動端的適配整理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
