手机端网页根据屏幕大小自适应

版权声明：一个被隔壁肥宅嘲笑的... https://blog.csdn.net/weixin_38641550/article/details/84761888

做了一个适应所有手机端网页屏幕的页面，我这个页面是使用的px转换rem然后在每个页面适配。

首先添加移动端meta头部，即：

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">

然后使用了一个js包 这个包是专门用来转换px和rem的   文件地址    。将这个包粘贴或者下载下来，然后在页面的css下引入

如图：

 之后我简单写了一下 发现很麻烦，然后我使用了scss，下面是安装scss流程 也可以到官网去安装

1：安装 ruby  一路下一步就可以了 然后在CMD看看是否安装成功   ruby -v

2: 安装scss  

gem install sass

3：安装scss编译包

gem install compass

4：查看是否安装成功

sass -v

compass -v

 5：简单写一个scss文件 然后编译scss。编译scss有3种方法：

1：
//单文件转换命令
sass input.scss output.css
2：
//单文件监听命令
sass --watch input.scss:output.css
3：
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch sass:css

 这里我是用的第三种方法。附文件路径：

 px2rem.scss文件：

@function px2rem( $px ){
	@return $px*320/$designWidth/20 + rem;
}

写scss的时候要这么写：

@import '../utils/px2rem.scss';
$designWidth : 750; // ui给你的文件宽度
div{
  background: yellow;
  height: px2rem(750);
  width: px2rem(750);
}

然后就可以看你的页面了