百度 : postcss 这个就行
hotcss 文件在 https://github.com/Shaxin742/tools
做了一个适应所有手机端网页屏幕的页面,我这个页面是使用的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);
}
然后就可以看你的页面了