Less general purpose PC Mobile Library

//Less file (mobile-generic less file)//author marchen//time 2014/9/1//protocol MIT//only consider WebKit kernel mobile browser and Firefox kernel browser//Custom less mix function/*********** CSS3 Style collection *************///box model border calculation. Border-box (){box-sizing:Border-box;-webkit-box-sizing:Border-box;}//Fillet. Border-radius (@radius: 2px){-moz-border-radius:@radius;-webkit-border-radius:@radius;Border-radius:@radius;}//deformation. Transform (@all){-moz-transform:@all;-webkit-transform:@all;Transform:@all;}//transition. Transition (@all){-moz-transition:@all;-webkit-transition:@all;transition:@all;}//Common transitions. Transiton (){-moz-transition:All . 7s. 1s ease;-webkit-transition:All . 7s. 1s ease;transition:All . 7s. 1s ease;}/*You can customize the modifications*///Animation. Animation (@all){-moz-animation:@all;-webkit-animation:@all;Animation:@all;}//Common animations. 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; }//font effects. Text-shadow-light (@blur: 2px){Text-shadow:0px 0px @blur White;}/*Use imagination to define common font effects*///Box shadow. Box-shadow (@all){-moz-box-shadow:@all;-webkit-box-shadow:@all;Box-shadow:@all;}//Common box shadows. 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 rotation. Text-rotate (@angle: 45deg){-webkit-transform:Rotate (@angle);-moz-transform:Rotate (@angle);Transform:Rotate (@angle);}//font. Font-face (@fontname, @fontdir){//font name string font file directory @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;}} Gradient (a simple gradient of two colors). 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%);/* the*/}/******************************************* Gadget *********************************************///Long word forced line wrapping. Wrap (){Text-wrap:Wrap;White-space:-moz-pre-wrap;White-space:Pre-wrap;Word-wrap:Break-word;}/******************************************* various mobile side bug fixes **********************************///Remove the transparent layer (usually formatted in the head) that appears when the handheld device is clicked. Delete-highlight (){A,button,input{-webkit-tap-highlight-color:Rgba (0,0,0,0);-webkit-tap-highlight-color:Transparent;/*For some androids*/}}//removes the UI rendering effect from the Apple browser's own Input[submit/reset/button]. Delete-appearance (){input[type= "Submit"],input[type= "reset"],input[type= "button"],button {-webkit-appearance:None;}}//Mobile Bug Summary//bug One: The phenomenon:// android4.0 above some of the phone's webview, when the canvas is smaller than the screen size, the drawing will appear ghosting, that is, a diagram is drawn only once, but there are two solutions: the canvas outer div needs to set properties style= "overflow: Visible;-webkit-transform:translatez (0); *///bug II://Phenomenon: android4.x part of the mobile phone, when changing the size of the canvas sometimes will die. As you may all know, resizing a canvas can be a complete refresh of the canvas, but it can also cause a portion of the 4.x phone to die. Solution: Refresh the canvas with Clearrect. *///Welcome to update more bugs

Once the face is defined, the next time it is directly. Border-box () So the call is done. It's a lot of time. It feels great. Of course, you can't just do things differently. This is a compatible less code on the last PC side.

/** * Author Marchen * Time 2014/8/20 * MIT * style compiled as CSS after running*//////////////////////less maxmin would 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;}//Alternate animations

Less general purpose PC Mobile Library