前端开发-移动端（2）- 自适应屏幕

最新推荐文章于 2023-01-30 15:09:30 发布

hdchangchang

最新推荐文章于 2023-01-30 15:09:30 发布

阅读量499

点赞数

分类专栏： css html5

本文链接：https://blog.csdn.net/hdchangchang/article/details/64122514

版权

本文介绍了移动端自适应屏幕的几种方法，包括使用百分比、通过js设定viewport、运用rem单位以及弹性盒模型（flex）。在实现过程中，特别强调了如何根据设计图尺寸换算rem单位来确保跨设备兼容性，同时提到了雪碧图和background-size的rem单位转换，并推荐使用Less配合koala进行px到rem的转换。

摘要由CSDN通过智能技术生成

移动端自适应屏幕方法：

1、百分比

2、viewport利用js设定

(function(){
	var w = window.screen.width;
	var targetW = ;
	var scale = w/targetW; //当前尺寸/目标尺寸
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "content-width=640,user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
	//console.log(scale);
	document.head.appendChild(meta);
})();

(function(){
    var userAgent = navigator.userAgent;
    var regExp = /Android (\d+\.\d+)/;
    if( regExp.test(userAgent) ){
      var version = parseFloat(RegExp.$1);
      if(version>2.3){
        var phoneScale = parseInt(window.screen.width)/640;
        document.write('<meta name="viewport" content="