less通用pc移動庫

標籤：android   style   blog   color   io   os   ar   for   檔案   

// less 檔案 (移動端通用less檔案)// 作者 marchen// 時間 2014/9/1// 協議 MIT // 只考慮webkit核心手機瀏覽器和Firefox核心瀏覽器// 自訂less 混合函數/*********** CSS3樣式合集 *************///盒子模型 邊框計算.border-box() {box-sizing:border-box;-webkit-box-sizing:border-box;}//圓角.border-radius(@radius:2px) {-moz-border-radius:@radius;-webkit-border-radius:@radius;border-radius:@radius;}//變形.transform(@all) {-moz-transform:@all;-webkit-transform:@all;transform:@all;}//過渡.transition(@all) {-moz-transition:@all;-webkit-transition:@all;transition:@all;}//常用過渡.transiton() {-moz-transition:all .7s .1s ease;-webkit-transition:all .7s .1s ease;transition:all .7s .1s ease;} /*可以自訂修改*///動畫.animation(@all) {-moz-animation:@all;-webkit-animation:@all;animation:@all;}//常用動畫.animation(@name) {-moz-animation:@name 1s 0s 1 ease both;-webkit-animation:@name 1s 0s 1 ease both;animation:@name 1s 0s 1 ease both; }//字型特效.text-shadow-light(@blur:2px) {text-shadow: 0px 0px @blur white;}/*可發揮想象定義常用字型特效*///盒子陰影.box-shadow(@all) {-moz-box-shadow:@all;-webkit-box-shadow:@all;box-shadow: @all;}//常用盒子陰影.box-shadow-light(@blur) {-moz-box-shadow:0px 0px @blur white;-webkit-box-shadow:0px 0px @blur white;box-shadow: 0px 0px @blur white; }//文字旋轉.text-rotate(@angle:45deg) {-webkit-transform: rotate(@angle);-moz-transform: rotate(@angle);transform:rotate(@angle);}//字型.font-face(@fontname,@fontdir) { //字型名稱 string 字型檔目錄@font-face {font-family: @fontname;src: url(‘@{fonturl}/@{fontname}.eot‘);src: url(‘@{fonturl}/@{fontname}.eot?#iefix‘) format(‘embedded-opentype‘), url(‘@{fonturl}/@{fontname}.woff‘) format(‘woff‘), url(‘@{fonturl}/@{fontname}.ttf‘) format(‘truetype‘), url(‘@{fonturl}/@{fontname}.svg#@{fontname}‘) format(‘svg‘);font-weight: normal;font-style: normal;}}//漸層 (簡單的二種顏色的漸層).linear-gradient(@angle:45deg,@start-color:rgba(0,0,0,1),@stop-color:rgba(255,255,255,1) {background: -moz-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* ff3.6+ */background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, @start-color), color-stop(100%, @stop-color)); /* safari4+,chrome */background: -webkit-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* safari5.1+,chrome10+ */background: linear-gradient(@angle, @start-color 0%, @stop-color 100%); /*w3c*/ }/******************************************* 小工具 *********************************************///長單詞強制換行.wrap() {text-wrap: wrap;white-space: -moz-pre-wrap;white-space: pre-wrap;word-wrap: break-word;}/******************************************* 各種移動端bug修複 **********************************///去掉手持功能點擊時出現的透明層(一般在頭部做格式化).delete-highlight(){a,button,input{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */}}//去掉蘋果瀏覽器內建input[submit/reset/button]的ui渲染效果.delete-appearance() {input[type="submit"],input[type="reset"],input[type="button"],button {-webkit-appearance: none;}}//移動端bug匯總//bug一：現象：//android4.0以上一部分手機的webview中，當canvas小於螢幕大小時，繪圖時會出現重影，就是說一個圖只繪製了一遍，卻出現了兩個解決方案：canvas外層的div需要設定屬性style="overflow:visible;-webkit-transform: translateZ(0);*///bug二：//現象：android4.x中一部分手機，在改變canvas大小的時候有時會卡死。大家可能都知道，重新設定canvas的大小可以實現canvas的完全重新整理，但是也會導致一部分4.x手機卡死。//解決方案：用clearRect重新整理canvas。*///歡迎更新更多的bug

 面的一旦定義好的話,下次就直接.border-box()這樣調用就行了.省了不少時間.感覺很棒.當然做事不能只做不一般.是吧.這個 在上一道pc端的相容less代碼.

/** * author marchen * time 2014/8/20 * MIT * style 編譯為css後在運行 *//////////////////////less maxmin will be delete //////////////////////////////////border-radius .border-radius(@width:2px) {    border-radius: @width;-moz-border-radius: @width;-webkit-border-radius: @width;-o-border-radius: @width;-ms-border-radius: @width;}//transform-origin .transform-origin(@x:center,@y:center) {    transform-origin: @x @y;-webkit-transform-origin: @x @y;-moz-transform-origin: @x @y;-o-transform-origin: @x @y;-ms-transform-origin: @x @y;}//perspective-origin .perspective-origin(@x:center,@y:center) {    perspective-origin: @x @y;-webkit-perspective-origin: @x @y;-moz-perspective-origin: @x @y;-o-perspective-origin: @x @y;-ms-perspective-origin: @x @y;}//transform-style .transform-style(@style:flat) {    transform-style: @style;-moz-transform-style: @style;-webkit-transform-style: @style;-o-transform-style: @style;-ms-transform-style: @style;}//transform .transform(@rotate:0deg,@scale:0,@skew:0deg,@translate:0px) {    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);}//animate .animate(@all) {    animation: @all;-webkit-animation: @all;-moz-animation: @all;-o-animation: @all;-ms-animation: @all;}.animate(@name,@duration:1s,@delay:0s,@ease:ease,@count:1,@direction:normal,@end:both) {    animation: @name @duration @delay @count @ease @end @direction;-webkit-animation: @name @duration @delay @count @ease @end @direction;-moz-animation: @name @duration @delay @count @ease @end @direction;-o-animation: @name @duration @delay @count @ease @end @direction;-ms-animation: @name @duration @delay @count @ease @end @direction;}//transition .transition(@all) {    transition: @all;-webkit-transition: @all;-moz-transition: @all;-o-transition: @all;-ms-transition: @all;}.transition(@property,@duration:0.7s,@delay:0.1s,@ease:ease) {    transition: @arguments;-webkit-transition: @arguments;-moz-transition: @arguments;-o-transition: @arguments;-ms-transition: @arguments;}//text-shadow  text effect .text-shadow(@all) {    text-shadow: @all;}.text-shadow(@color:black,@x:1px,@y:1px,@offset:2px) {    text-shadow: @arguments;}.text-light(@color:white,@blur:15px) {    text-shadow: 0px [email protected] @color;}.text-apple(@tcolor:#000,@x:0,@y:1px,@blur:1px,@color:#fff) {    color: @tcolor;text-shadow: @x @y @blur @color;}.text-emboss() {    color: #ccc;    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;}.text-blur(@color:black,@blur:5px) {    color: transparent;    text-shadow: 0 [email protected] @color;}//box-shadow .box-shadow(@all) {    box-shadow: @all;-moz-box-shadow: @all;-webkit-box-shadow: @all;-o-box-shadow: @all;-ms-box-shadow: @all;}.box-shadow(@x:0px,@y:0px,@blur:2px,@color:#605F5F) {    box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;-o-box-shadow: @arguments;-ms-box-shadow: @arguments;}//text-rotation .text-rotation(@rotate:0deg) {    transform: rotate(@rotate);-webkit-transform: rotate(@rotate);-moz-transform: rotate(@rotate);-o-transform: rotate(@rotate);-ms-transform: rotate(@rotate);writing-mode: lr-tb;}//備用動畫

 

less通用pc移動庫