上海11选5走势图

移动端如何使用js来实现rem单位的布局(二)

上一章节讲完了用js实现rem的布局,但是当写页面时每次都要去计算rem的值是不是很不方便呢?下面介绍一下不使用计算器就可以计算出rem的值是如何实现的。

首先我们需要新建一个less文件,说到less先解释一下什么是less。

Less中文网给出的解释是:Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。

less中有一个很好用的功能,这里就拿rem这个例子来说明一下。新建一个less文件,注意less文件要在你的css文件夹中,把你写的样式全部剪切到less文件中,这里是不需要改数值单位的,即设计图量出来的数值是多少就写多少,因为less文件会帮你转换成rem的数值。前提是要给他定一个数值,就是上篇说到的一个像素等于多少rem,这里我用的是750px的设计图,除以15,得出的是50rem。

@r:50rem;
a,
input,
button{
	-webkit-tap-highlight-color:rgba(0,0,0,0); /*清除按下时的阴影*/
}
input,
button{
	-webkit-appearance:none; /*清除iOS下自带的圆角*/
	border-radius: 0;
}
body{ 
	margin: 0;
	-webkit-user-select:none; /*禁止选中文字*/
}
body * {
	-webkit-user-select:none;
	font-family: Helvetica; /*所有移动端下都支持的一种字体*/
}
body{
	-webkit-text-size-adjust:100%;	/*禁止横竖切换字体的改变*/
}
a{ text-decoration: none;}
#header{height: 96/@r; line-height: 96/@r; background: #F00;}
#header i{font-size: 45/@r; color: #FFF;}
#back{ width:99/@r; height: 96/@r;}
#header input{ width: 522/@r; height: 64/@r; border: none; background: #eef2f3; border-radius: 34/@r;}

less文件中需要变得就是,头部加上一个 @r:50rem 后,所有的数值都除以@r就可以了,即上述代码。当然还要借助一个小工具,名为koala的一个处理工具。你需要下载安装,打开后把你的整个css文件放上,双击less.less,会弹出图2的左侧栏,点击compile就可以了。

blob.png

blob.png

回到你的文件夹中,会多出一个less.css的文件,这里面就是处理好的以rem单位的数值。并且会自动给你排版。(即下面代码)

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*清除按下时的阴影*/
}
input,
button {
  -webkit-appearance: none;
  /*清除iOS下自带的圆角*/
  border-radius: 0;
}
body {
  margin: 0;
  -webkit-user-select: none;
  /*禁止选中文字*/
}
body * {
  -webkit-user-select: none;
  font-family: Helvetica;
  /*所有移动端下都支持的一种字体*/
}
body {
  -webkit-text-size-adjust: 100%;
  /*禁止横竖切换字体的改变*/
}
a {
  text-decoration: none;
}
#header {
  height: 1.92rem;
  line-height: 1.92rem;
  background: #F00;
}
#header i {
  font-size: 0.9rem;
  color: #FFF;
}
#back {
  width: 1.98rem;
  height: 1.92rem;
}
#header input {
  width: 10.44rem;
  height: 1.28rem;
  border: none;
  background: #eef2f3;
  border-radius: 0.68rem;
}

可以动手试一试。

关键词:
返回列表

上海11选5走势图相关的文章

相关案例

易玩棋牌 上海11选5 易玩棋牌 上海11选5 悠洋棋牌 上海11选5开奖结果 上海11选5 上海11选5走势图 多彩彩票平台 上海11选5