这是H5项目完成后的一些整理，有些理解不能非常准确，希望大家能帮忙指出。
移动端的适配
一些名词解释
- visual viewport 可视视图
- layout viewport 布局视图
- vm 可视视图的宽度，最大为100.类似一个百分比的值
- vh 可视视图的高度
- points 独立像素点。抽象的单位，在数学的坐标空间才有意义
- dpr = 物理像素/独立像素点。
- display zoom 在苹果设置中显示有 标准和 放大。
- rendered Pixels = points*dpr
- physical pixels 物理像素，在display zoom 模式下 设备的分辨率可能会更低。
- PPI 每英寸上的像素个数。这里的像素是 rendered pixels 逻辑像素。
- DIPs or dp device independent pixel 设备无关的独立像素，比如css 的px单位
图片来源 githubusercontent
我们采用的是淘宝的 lib-flexible 方案，该方案的总体思路为模拟vm和vh。
比如750*1334的设计图 通过插件webpack px2rem(remUnit:75px) 来模拟vm。这样1rem就等于1vm.
比如代码
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
px2rem处理后
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
样式
- 引用normalize.css
- 确定变量
/*背景色*/
$body-bg: #fff;
$component-bg:#ddd;
/*常用灰色*/
$gray-darker: #222;
$gray-dark: #333;
$gray:#666;
$gray-light:#999;
$gray-lighter:#ccc;
$gray-lightest: #eee;
/*主色调*/
$brand-primary: #c71628;
$brand-xxx:#ddd;//其他的颜色
/*行高*/
line-height-base: 2; // 行高/字体
line-height-large:2.4; //更高
/*字体*/
$font-size: 28px;
$font-size-large: 34px;
$font-size-small: 24px;
/*... 其他项目涉及的变量*/
- mixins
因为我平常有搜集一些不错的mixins，比如：
--buttons
生成buttons，focus、hover都对应的背景色的改变
@mixin button-variant($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
&:focus,
&.focus {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 25%);
}
&:hover {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
&:active,
&.active{
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
&:hover,
&:focus,
&.focus {
color: $color;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
}
&:active,
&.active{
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus,
&.focus {
background-color: $background;
border-color: $border;
}
}
}
--brightness
通过背景色获取字体颜色
// Brightness math based on:
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function sqrt($r) {
$x0: 1; // initial value
$solution: false;
@for $i from 1 through 10 {
@if abs(2 * $x0) < 0,00000000000001 { // Don't want to divide by a number smaller than this
$solution: false;
}
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0) !global;
@if ( abs($x1 - $x0) / abs($x1)) < 0,0000001 { // 7 digit accuracy is desired
$solution: true;
}
$x0: $x1;
}
@if $solution == true {
// If $r is negative, then the output will be multiplied with <a href="http://en.wikipedia.org/wiki/Imaginary_number">i = √-1</a>
// (√xy = √x√y) => √-$r = √-1√$r
@if $r < 0 {
@return $x1 #{i};
}
@else {
@return $x1;
}
}
@else {
@return "No solution";
}
}
@function brightness($color) {
// Extract color components
$red-component: red($color);
$green-component: green($color);
$blue-component: blue($color);
// Calculate a brightness value in 3d color space between 0 and 255
$number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);
// Convert to percentage and return
@return $number / 255 * 100%;
}
@function contrasting-color($color, $light, $dark) {
@if brightness($color) < 65% {
@return $light;
} @else {
@return $dark;
}
}
等等mixins 方便
- 写基础的scss 代码
body{
font-size:$font-base;/*px*/ 启动post-css px2rem
color: $gray; //基础字体颜色
background: $body-bg;
}
/*字体颜色*/
.gray-darker{
color:$gray-darker;
}
.gray-dark{
color: $gray-dark;
}
.gray{
color: $gray;
}
.gray-light{
color: $gray-light;
}
.gray-lighter{
color:$gray-lighter
}
/*字体*/
.text-base{
font-size:$font-size;
}
.text-large{
font-size:$font-size-large
}
.text-small{
font-size:$font-size-small
}
/*按钮*/
/*helper*/
.pull-right{
float: right;
}
.pull-left{
float: left;
}
.clearfix{
@include clearfix();
}
动画
//todo 使用心得
https://daneden.github.io/animate.css/
手势
//todo 使用心得
文章引用