用rem写傻瓜式响应式布局

Veröffentlicht am   |  
想必大家做响应式布局的时候，计算百分比是最头疼的，恨不得把电脑给摔了，今天我就介绍一种我自己认为很简单的响应式布局

  • 需要的工具:

  • lib-flexible（第三方库）

  • sublime text

  • mac终端

1.sublime 安装cssrem

下载地址


该插件用于把css样式中的px单位自动转换成rem，请把克隆下来的仓库放入以下路径：Sublime Text -> Preferences -> Package Settings -> cssrem；配置文件如下，请自行配置！！！

  • px_to_rem - px转rem的单位比例，默认为40。

  • max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6

  • available_file_types - 启用此插件的文件类型。默认为：[“.css”, “.less”, “.sass”]。

2.引用lib-flexible库

这个库是阿里出的一个开源第三方库，用来做移动端自适应的，大公司出的就是好，不信自己试一试！！！

引用地址

  • 引用方法

1
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

不要直接引用，需要把这段链接中的给替换成版本号，如当前版本号为0.3.2注意改库需要在所有引用库和样式的最上方引用

3.如何使用

现在我们就可以拿起样式稿开始布局了，不要想着如何布局方便自适应，少计算百分比，因为你就不需要计算。写样式的时候你才知道有多爽！！！

  • 1.修改px到rem的转换比例

打开sbulime>Preferences>Browse Packages>cssrem>cssrem.sublime-settings把其中的“px_to_rem”后面的转换比例改成你拿到的样式稿的十分之一,如果你的样式稿是750px的，后面就改成75,记着前面带空格！！！

  • 2.写css样式

在写css样式时，我们需要测量设计稿上各种数据，我们直接把测量好的数据写在css样式里，就想上图gif里面一样，回车自动转换为rem通篇都要以rem为单位，不管是字体，还是宽高，边距

  • 3.好像没有什么步骤了，就是这么简单，现在打开你写好的网页，在移动端看看吧，是不是充满屏幕，满满的都是爱啊！！

  • 4.如果你是在pc端看的话页面的最大宽度是540px，因为这个库把我们的电脑屏幕认定为低像素密度设备,屏幕等级为1，这种设备的最大宽度是540px;如果你想把它应用到pc端，你需要删除这个库，在css样式的最上方，添加：

1
2
3
:root{
	font-size:*px; 		//其中*代表你样式稿宽度的十分之一
}

  • 然后在css样式的最后添加几个媒体查询，只需要更改root下font-size的大小（记得单位是px，别enter敲顺手了，转换成rem了），就可以做成pc端的响应式页面了，再也不用写一堆别的样式，自适应就是这么简单。该自适应可不是流式布局。