目录

css建议

margin 和 padding

这里主要用于两个属性:margin 和 padding,我们以 margin 为例,padding 与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

你可以简写成

margin:1px 2px 3px 4px;

语法 margin:top right bottom left;

//四个方向的边距相同等同于margin:1px 1px 1px 1px;

margin:1px;

//上下边距都为1px左右边距均为2px等同于margin:1px 2px 1px 2px;

margin:1px 2px;

//右边距和左边距相同等同于margin:1px 2px 3px 2px;

margin:1px 2px 3px;

//注意这里虽然上下边距都为1px但是这里不能缩写

margin:1px 2px 1px 3px;

##边框border

边框的属性如下

border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句

border:1px solid #000;

语法 border:width style color;

##背景Backgrounds

背景的属性如下

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句

background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是 background:color image repeat attachment position;

你可以省略其中一个或多个属性值如果省略该属性值将用浏览器默认值默认值为

color: transparent;

image: none;

repeat: repeat;

attachment: scroll;

position: 0% 0%;

## 字体fonts

字体的属性如下

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

可以缩写为一句

font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;

注意如果你缩写字体定义至少要定义 font-size  font-family 两个值

## 列表lists

取消默认的圆点和序号可以这样写 list-style:none;

list的属性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句

list-style:square inside url(image.gif);

## 颜色Color

16进制的色彩值如果每两位的值相同可以缩写一半例如

Aqua: #00ffff —— #0ff

Black: #000000 —— #000

Blue: #0000ff —— #00f

Dark Grey: #666666 —— #666

Fuchsia:#ff00ff —— #f0f

Light Grey: #cccccc —— #ccc

Lime: #00ff00 —— #0f0

Orange: #ff6600 —— #f60

Red: #ff0000 —— #f00

White: #ffffff —— #fff

Yellow: #ffff00 —— #ff0

## 属性值为0

书写原则是如果CSS属性值为0那么你不必为其添加单位 px/em),你可能会这样写

padding:10px 5px 0px 0px;

试试这样吧:

padding:10px 5px 0 0 ;

## 最后一个分号

最后一个属性值后面分号可以不写

`#nav{

border-top:4px solid #333;

font-style: normal;

font-variant:normal;

font-weight: normal;

}
`
可以简写成:

`#nav{

border-top:4px solid #333;

font-style: normal;

font-variant:normal;

font-weight: normal

}
`
## 字体粗细font-weight ##

你可能会这样写:

h1{

font-weight:bold;

}

p{

font-weight:normal;

}

可以简写成:

h1{

font-weight:700;

}

p{

font-weight:400;

}

## 圆角半径border-radius ##

border-radius  css3 中新加入的属性用来实现圆角边框

-moz-border-radius-bottomleft:6px;

-moz-border-radius-topleft:6px;

-moz-border-radius-topright:6px;

-webkit-border-bottom-left-radius:6px;

-webkit-border-top-left-radius:6px;

-webkit-border-top-right-radius:6px;

border-bottom-left-radius:6px;

border-top-left-radius:6px;

border-top-right-radius:6px;

可以简写成:

-moz-border-radius:6px 6px 0;

-webkit-border-radius:6px 6px 0;

border-radius:6px 6px 0;

语法 border-radius:topleft topright bottomright bottomleft;

## 什么是rem ##

CSS3新增的一个相对单位remroot em根em)。rem是相对于根节点或者是html节点)。如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px

## 1. 计算页面的dpr ##

    if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,3和3以上的屏,用3倍的方案,2用2倍方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
    }


## 如何转换rem ##

对于使用webpack的来说其实也是有一个postcss插件的px2rem可以很轻松的配置相关属性转换成相对于的rem单位比如我们的.postcssrc 配置如下


	module.exports = {
	  "plugins": {
	    "postcss-px2rem": {
	      baseDpr: 1,
	      remUnit: 37.5,
	      onePxComment: '1px',
	      forcePxComment: '!px',
	      keepComment: '!no',
	      forcePxProperty: ['font-size'] // font-size强制使用px单位
	    }
	  }
	}

## 1. 文本字号不建议使用rem ##

前面大家都见证了如何使用rem来完成H5适配那么文本又将如何处理适配是不是也通过rem来做自动适配

显然我们在iPhone3G和iPhone4的Retina屏下面希望看到的文本字号是相同的也就是说我们不希望文本在Retina屏幕下变小另外我们希望在大屏手机上看到更多文本以及现在绝大多数的字体文件都自带一些点阵尺寸通常是16px和24px所以我们不希望出现13px和15px这样的奇葩尺寸

如此一来就决定了在制作H5的页面中rem并不适合用到段落文本上所以在Flexible整个适配方案中考虑文本还是使用px作为单位只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小

配置完成之后在实际使用时你只要像下面这样使用

	.selector {
	width: 150px;
	height: 150px; 
	font-size: 12px; 
	border: 1px solid #ddd; 
	}

**px2rem处理之后将会变成**

	.selector {
	    width: 2rem;
	   height: 2rem;
	    border: 1px solid #ddd;
	}
	[data-dpr="1"] .selector {
	    font-size: 12px;
	}
	[data-dpr="2"] .selector {
	    font-size: 28px;
	}
	[data-dpr="3"] .selector {
	    font-size: 42px;
	}

因为不同的dpr屏幕会缩成不同比例所以这里的字号会根据dpr进行相应的放大举个例子如果data-dpr = 2 那么页面的viewport会被缩小所以字号需要相应的乘以比例进行放大

px转成rem的插件地址