css
aamen1109
这个作者很懒,什么都没留下…
展开
-
关于移动端css用rem单位的情况
写移动端的页面有一些了试用过的方法大概总结一下:1、字号单位px,宽度写百分数,高度写定值px2、在css中用@media写媒体查询,以iphone6 为分界,字号单位用rem,宽度写百分数,高度尽量用padding,不要给定值(防止用户在浏览器中自动调节字号大小,使页面错乱)3、就是本文想说的重点方法,用js算一下基本字号的大小,字号,宽度和高度,所有单位都用re原创 2015-12-03 13:03:40 · 1903 阅读 · 0 评论 -
select option 右对齐
最近一个需求的信息编辑,里面有连续的select选项,需要右对齐如下图:direction: rtl;原来有一个高端属性很少用到啊,这是个css2哦,,,原创 2016-04-21 15:56:13 · 1429 阅读 · 0 评论 -
css两行文字超出显示省略号
css写单行超出显示省略号,可以复习下,这个很常用。width: 3rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;这种两行的文字,用纯css截取,移动端下载也ok了,ios的我测了ok,安卓的只测试了小米,魅族,三星的部分机型,是否很符合规范大家可以去查查文档之类的,但是效果确实实现了啊原创 2016-03-11 16:14:49 · 5889 阅读 · 0 评论 -
移动端a链接按下背景变色js
注意移动端的按下,是touchstart,和touchend。。。function clickBg(obj,color01,color02){ obj.on('touchstart',function(){ $(this).css({ background:color01 }); }); obj.o原创 2016-03-08 15:42:50 · 634 阅读 · 0 评论 -
css伪类写三角
&:after{ content: ""; position: absolute; left: 0; bottom:0; width: 0; hei原创 2016-03-08 18:42:43 · 536 阅读 · 0 评论 -
loading条animation写法
-webkit-animation: rotate360 .5s linear infinite;-moz-animation: rotate360 .5s linear infinite;animation: rotate360 .5s linear infinite;@-webkit-keyframes rotate360{ 0%{-webkit-transform-or原创 2016-01-27 15:01:53 · 461 阅读 · 0 评论 -
sass写法 给animation添加webkit前缀(待完善)
sass文件内容--------------------------------------------@mixin prefix-animation($animation-name){ animation:$animation-name; -webkit-animation:$animation-name;}@mixin prefix-keyframes($a原创 2016-03-16 18:08:32 · 3052 阅读 · 0 评论 -
sass的循环写法实例
sass里面也有for的写法,在有些地方用着还是很方便的。比如:下图的左侧所有iconhtml写法:如下图,起名的时候还是要有规律的数字sass写法:i{ width: 18px; height: 18px; background:url(i/intro-icons.png) no-repeat;原创 2016-02-02 18:33:53 · 957 阅读 · 0 评论 -
css3移动端简单的背景渐变和文字渐变
background-image: -moz-linear-gradient(top, #fdfdfd, #f8f8f8); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #f8f8f8)); /* Saf4原创 2016-01-12 11:22:03 · 3391 阅读 · 0 评论 -
css媒体查询iphone4和iphone5
/* iphone4 */@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){}/* iphone5 */@media screen and (device-width: 320px) and (device-height:原创 2016-08-08 11:19:21 · 6985 阅读 · 0 评论