作文提出和属性优化小结,响应式Web设计实战总
分类:前端技术

CSS 写作建议和性能优化小结

2017/10/09 · CSS · 性能优化

原文出处: 守候   

图片 1

1.前言

响应式Web设计实战总结

2015/05/15 · HTML5 · 响应式

原文出处: 涂根华的博客   

 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media(媒体查询)使用等。

一:布局方式有如下几种:

1. 固定布局:固定布局以PX(像素)作为单位的,在PC端,设计稿多少PX就写多少PX,前几年都是这种布局,常见的是以960px或者1000px来设计的,但是这样设计有如下缺点:

1.页面很死板,在更大的屏幕上,页面左右2边留白。

  1. 不适应响应性布局。

 2.  流式布局:流式布局是以百分比作为单位的,我们要牢记如下公式:

百分比宽度 = 目标元素宽度 / 上下文元素宽度

这种布局优点:可以自适应布局,根据不同的分辨率显示不同的宽度。

缺点:在行高或者marginTop在大屏幕下看起来太高,在小屏幕下看起来太窄。

  弹性布局:弹性布局是以em作为单位的,同样弹性布局也支持如下公式:

百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸

使用em将文字像素px转换为相对单位,现在浏览器默认文字的大小是16px,如果一个文字大小是48px,上下文元素是(浏览器),那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 =0.5em}.弹性布局也支持响应性web设计。

二: 媒体查询:

根据特定的环境查询各种属性值,比如设备的宽度,是否横向使用不同的css样式来渲染。

媒体查询使用如下:比如内联样式可以如下写:

  1. 最大宽度960px一种布局:

@media screen and (max-width:960px) {}

  1. 最小宽度600px 另一种布局:

@media screen and (min-width:600px) {}

  1. 宽度在600px 到 960px之间,如下:

@media screen (min-width:600px) and (max-width:960px) {}

外联样式使用link标签来引用样式:

XHTML

<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px) and (max-width):960px”/>

1
2
3
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
<link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px)”/>
<link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px) and (max-width):960px”/>

如果对于像ipad来说,我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。

理解meta各个属性的含义:

做h5页面移动端开发需要在head标签内引入下面这句话。(如果没有引入的话,页面的字体等大小就不正常了)。

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />

具体含义如下:

  1. Width: 控制viewport的大小。如device-width为设备的宽度。
  2. Height: 和width相对应,指定高度。
  3. initial-scale: 初始缩放比例,页面第一次加载时的缩放比例。
  4. maximum-scale 允许用户缩放到的最大比例,范围从0到10.0
  5. minimum-scale: 允许用户缩放到的最小比例,范围从0到10.0
  6. user-scalable: 用户是否可以手动缩放,值可以是:

1,  yes,true允许用户缩放;

2,  no、false不允许用户缩放。 (只设置这一个属性,有的浏览器并不生效,我们需要配合maxinum-scale和mininum-scale最大缩放                与最小缩放分别为1:1)。

想深入理解meta及viewport各个属性,可以看 “无双” 下面这篇博客讲的非常详细。如下:

综合:流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

但是针对响应性web布局使用媒体查询也有缺点的,缺点如下:

对于设计师:要针对不同的屏幕大小设计不同的设计,(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。对于前端对于不同的屏幕要写不同的样式,增加了工作量,同时维护起来不是很方便(要维护几份不同的css)。

三:图片

1. 对于背景图片来说,css3有个属性 background-size可以等比例缩放缩放背景图片。

但是对于小屏幕的移动设备去加载大背景图片的话,有缺点的,最主要的缺点是要更大的带宽,浪费流量。所以我们要想做的更好的话,可以使用媒体查询根据设备的宽度来         渲染不同大小的背景图片。

2. 对于页面上的<img/>标签图片的话:

1. 如果只是页面上静态图片的话,不考虑带宽的情况下,可以使用width=”100%”等比例缩放,如:<img src=”XX.png” width=”100%”/>

2. 如果是商品图或者页面上有多个的话,考虑不浪费不必要的带宽,需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端,之后我们前端使用JS动态的渲染出来。

在现代浏览器中(包括IE7 )中要实现图片随着流动布局相应缩放非常简单,只需要在css中加上这么一句代码:

CSS

img { max-width:100%; }

1
2
3
img {
max-width:100%;
}

含义是:确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度,所以当窗口或容器的可视部分变窄时,图片的最大宽度值也会相应的变小,图片本身永远不会覆盖容器。

四:理解css单位px,em,rem的区别:

1.  Px是css中最基本的长度单位,在PC端,设计稿多少像素,页面css就写多少像素。

  1.  em 是相对单位,相对于上下文元素而言,一般情况下,浏览器默认的字体大小是16px,也就是1em等于16px;比如:

如果一个文字大小是48px,上下文元素是(浏览器),那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1            标签内部span标签font-size 是 24px,那么h1标签的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 = 0.5em}.

3. rem也是相对单位。rem是相对于html根元素来计算的,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同           em,默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

比如设置html根元素 如下代码:

CSS

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

1
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

当一个p元素是24px的话,那么转换成rem为单位的话,那么只需要如下这样写即可:

CSS

P {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

1
P  {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

五:元素未知宽度居中。

我们先来介绍一下未知宽度,元素居中的方法,对于响应性web设计是有帮助的,我们可以来了解下。

第一种方法:

假如页面html结构如下:

XHTML

<div><p>What is CSS?</p></div>

1
<div><p>What is CSS?</p></div>

只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码:

CSS

div{text-align:center} p{display:inline-block}

1
2
div{text-align:center}
p{display:inline-block}

第二种方法如下:

CSS

div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;}

1
2
div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}

六:媒体查询标准写法:

XHTML

@media 设备类型 and (设备特性) { // css 样式 }

1
2
3
@media 设备类型 and (设备特性) {
// css 样式
}

在css2.1中定义了10种设备类型,分别如下:

 可以指定的值  含义
 all  所有设备
 screen  电脑显示器
 print  打印用纸或打印预览视图
 handled  便携设备
 tv  电视机类型的设备
 speech  语音和音频合成器
 braille  盲人用点字法触觉回馈设备
 embossed  盲人打印机
 projection  各种投影设备
 tty  使用固定密度字母栅格的媒介,比如电传打字机和终端

Css设备特性共有13种,是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定值接受min/max的前缀,用来表示大于等于或小于等于的逻辑,以此避免使用<和>这些字符。

设备特性如下表:

 特性  可指定的值  是否允许使用min/max前缀  特性说明
 width  带单位的长度数值  允许  浏览器窗口的宽度
 height  带单位的长度数值  允许  浏览器窗口的高度
 device-width  带单位的长度数值  允许  设备屏幕分辨率的宽度值
 device-height  带单位的长度数值  允许  设备屏幕分辨率的高度值
 orientation  只能指定两个值:portrait或landscape  不允许  窗口的方向是纵向还是横向,
 aspect-ratio  比例值,例如:16/9  允许  窗口的纵横比,比例值为浏览器窗口的宽度值/高度值
 device-aspect-ratio  比例值,例如:16/9  允许  设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值
 color  整数值  允许  设备使用多少位的颜色值,如果不是彩色设备,该值为0
 color-index  整数值  允许  色彩表中的色彩数
 monochrome  整数值  允许  单色帧缓冲器中每像素的字节数
 resolution  分辨率值,譬如300dpi  允许  设备的分辨率
 scan  只能指定两个值:progressive或interlace  不允许  电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描
 grid  只能指定两个值:0或1  不允许  设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0

上面是一些响应式web设计的基本知识点,下面我们可以详细讲解下响应式web设计如何实践?

  1. 首先需要在页面头部引入这行meta代码,如下:

XHTML

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

它的意思我这里不说了,如果不明白的话,可以看上面 提到的 无双那篇博客 很详细。

还要引入这一句:

XHTML

<meta content="telephone=no,email=no" name="format-detection" />

1
<meta content="telephone=no,email=no" name="format-detection" />

我们的代码有类似于电话这样的数字的时候,因为有的手机上它会自动转换成可以拨打电话,所以我们加上这句就不会了。

比如我页面引入如下:

图片 2

2. 响应性web设计需要使用css3媒体查询media来写不同的css样式。在移动端浏览器中或者某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方定义为,设备的物理像素与设备的独立像素的比列,也就是 devicePixelRatio = 设备的物理像素/ 设备的独立像素。这三个参数不是固定的,只要其中2个确定了,那么就可以知道第三个参数了,设备的物理像素我们可以映射到设备的分辨率的宽度,独立像素我们可以映射到媒体查询media定义的宽度。而比列devicePixelRatio我们可以理解为css中的1像素(px)在设备上占用多少个物理像素。比如我们目前常见的手机分辨率如下:

 手机类型:  分辨率
 小米3  1080*1920
 小米2  720*1280
 红米Note  720*1280
 魅族4  1152*1920
 魅族3  1080*1800
 魅族2  800*1280
 iphone6  750*1334
iphone5s  640*1136
iphone4s  480*800
 iphone3s  320*480
 三星  720*1280
 三星  480*800

如上小米3分辨率为1080,独立像素为360px,那么比列为3,也就是一个css的1px,占用3个物理像素,小米2和红米Note分辨率为720,独立像素还是360px,所以比列为2,所以小米3相对于小米2与红米Note更清晰。同理iphone和其他类型的手机也一样。

而上面说的独立像素就是360px,正是我们css中的媒体查询关联的。

如下我们可以在css加上这样的媒体查询就可以匹配到样式了;如下:

/* 针对手机屏幕的宽度是360 384等屏幕的宽度

*width(宽度可以设置为384px) max-width:384来计算 但是边距 字体大小等还是安装360px来计算

*****************************************/

CSS

@media (min-width:360px) and (max-width: 399px) {}

1
@media (min-width:360px) and (max-width: 399px) {}

而我们目前的独立像素有320,400的,我们也可以增加css媒体查询。如下:

CSS

/* min-width:320px * 针对设备独立像素为320px 的css * min-width:320 和 max-width:639之间 320-639公用样式也包含在里面 ============================*/ @media (min-width: 320px) and (max-width:639px){} /* * 针对设备独立像素为400px ========================*/ @media (min-width: 400px) and (max-width:401px){}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* min-width:320px
 
* 针对设备独立像素为320px 的css
 
* min-width:320 和 max-width:639之间 320-639公用样式也包含在里面
 
============================*/
 
@media (min-width: 320px) and (max-width:639px){}
 
/*
 
* 针对设备独立像素为400px
 
========================*/
 
@media (min-width: 400px) and (max-width:401px){}

但是也还有些目前还未知的独立像素,比如未来的某时刻有大于640px的独立像素,或者是说我们手机移到竖屏时候,我们也可以针对适应的做一点匹配。如下我们针对640px-999px做一个匹配。

CSS

/* min-width:640px * 针对设备独立像素为640px 的css * min-width:640 和 max-width:999之间 ============================*/ @media (min-width: 640px) and (max-width:999px){} 但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。 /* 最小宽度1000样式 *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的 =======================*/ @media screen and (min-width:1000px) {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* min-width:640px
 
* 针对设备独立像素为640px 的css
 
* min-width:640 和 max-width:999之间
 
============================*/
 
@media (min-width: 640px) and (max-width:999px){}
 
但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。
 
/* 最小宽度1000样式
 
*为了适应PC端 所以PC端在设计时候 默认以1000px来设计的
 
=======================*/
 
@media screen and (min-width:1000px) {}

我们都知道在IE6-8下 IE是不支持css3中的媒体查询的,所以在网上有大牛已经帮我们考虑到这个问题了,所以只需要在网上下载 respond.js下来放到我们本地,然后页面上引入即可。respond.js的github地址如下:

通过以上:我们可以对编写css响应性web设计有一个规范,如下:(当然如果大家有更好的方法也可以提出来。)

  1. 头部reset.css 是否要独立出来一个css文件,或者不独立出来 直接放在css顶部。

  2. 公用的头部或者尾部样式 直接放在css文件顶部,及公用的页面css样式放在顶部(添加注释。)

  3. 媒体查询css样式分别如下组织:

  4. 移动端开发css媒体查询 代码组织如下:

CSS

/* min-width:320px * 针对独立像素为320px 的css =======================================================================================================*/ @media (min-width: 320px) and (max-width:639px){ /* css style*/ } /* 针对独立像素的宽度是360 384等 * max-width:384来计算 但是边距 字体大小等还是安装360px来计算 *****************************************/ @media (min-width:360px) and (max-width: 399px) { /* css style*/ } /* 针对独立像素为400px =======================================================================================================*/ @media (min-width: 400px){ /* css style*/ } /* 针对独立像素大于640以上的 小于999的 =======================================================================================================*/ @media (min-width: 640px) and (max-width:999){ /* css style*/ }

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
/* min-width:320px
* 针对独立像素为320px 的css
=======================================================================================================*/
@media (min-width: 320px) and (max-width:639px){
/* css style*/
}
 
/* 针对独立像素的宽度是360 384等
* max-width:384来计算 但是边距 字体大小等还是安装360px来计算
*****************************************/
@media (min-width:360px) and (max-width: 399px) {
/* css style*/
}
 
/* 针对独立像素为400px
=======================================================================================================*/
@media (min-width: 400px){
/* css style*/
}
 
/* 针对独立像素大于640以上的 小于999的
=======================================================================================================*/
@media (min-width: 640px) and (max-width:999){
/* css style*/
}
  1. 在PC端 1000以上的媒体查询写在如下里面:

CSS

@media screen and (min-width:1000px) { /* css style*/ }

1
2
3
@media screen and (min-width:1000px) {
/* css style*/
}
  1. 基本的编码规范注意事项如下:

1.给html根元素字体大小定义相对单位(rem)如下:

CSS

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

1
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

之后的元素字体使用rem作为单位。比如h2字体大小是24px,那么在移动端 字体大小设置为 font-size:2.4rem 在媒体查询
@media (min-width:1000) {}内 字体大小希望可以写2个,font-size:24px;font-size:2.4rem,这是为了未来的移动设备独立像素
超过1000后能使用rem作单位。

2.根据设计稿给body元素设置默认的font-size及color,之后的媒体查询根据自身的条件需要覆盖font-size及color的话 就覆盖掉。

3.在对应的设备媒体查询内,有很多公用的css样式希望合并,比如这样的:

CSS

.six-qa li .q{line-height:26px;font-size:1.6rem;} .six-qa li .a{line-height:26px;font-size:1.6rem;}

1
2
.six-qa li .q{line-height:26px;font-size:1.6rem;}
.six-qa li .a{line-height:26px;font-size:1.6rem;}

可以直接合并成如下:

CSS

.six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

1
.six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

编写响应性web设计css媒体查询更好的方案思考?

我们都知道,为了自适应各种设备,我们需要编写不同的css进行适配,比如宽度,外边距,内边距,字体大小等不同,需要不同的适配,那么我们现在能不能编写一份css呢,比如我编写一份针对:独立像素为400屏幕宽度的 编写一份css样式,然后其他的样式,比如320的,384的,360的或者640以上的,针对这些css样式,我们能不能使用NodeJS来自动读取400的css,然后分别对上面独立像素大小的屏幕进行比例一下,比如屏幕400像素的 font-size:24px 那么 320px的屏幕字体大小就是 font-size = Math.floor(320*24/400),其他css属性都按照这种方式来做,那么在本地就可以生成不同的版本css了(比如针对320版本的,针对640以上css版本的),然后在head头部分别引入不同的css版本,比如如下引入:

XHTML

<link rel="stylesheet" href="320.css" media="all and (min-width:320px) and (max-width:321px)"/> <link rel="stylesheet" href="360.css" media="all and (min-width:360px) and (max-width:399px)"/> <link rel="stylesheet" href="400.css" media="all and (min-width:400px) and (max-width:401px)"/> <link rel="stylesheet" href="640.css" media="all and (min-width:640px) and (max-width:999px)"/> <link rel="stylesheet" href="1000.css" media="all and (min-width:1000px)"/>

1
2
3
4
5
<link rel="stylesheet" href="320.css" media="all and (min-width:320px) and (max-width:321px)"/>
<link rel="stylesheet" href="360.css" media="all and (min-width:360px) and (max-width:399px)"/>
<link rel="stylesheet" href="400.css" media="all and (min-width:400px) and (max-width:401px)"/>
<link rel="stylesheet" href="640.css" media="all and (min-width:640px) and (max-width:999px)"/>
<link rel="stylesheet" href="1000.css" media="all and (min-width:1000px)"/>

我们知道,只要设备的宽度在以上任何一种的时候 只会渲染一份css,其他的css不渲染,所以我们可以按照这种方式来做一份css。至于这种方案我以后会使用nodeJS来做出来的。最后我提供一个可运行的demo吧,你们可以下载下面的demo,放在本地服务器下运行下,在手机端看下,就可以针对不同的设备大小来做适配的,不过我这个demo没有做的很全面,目前只适配了320的 360-399的 400的 1000以上的,暂时没有适配640的,所以如果测试的时候,手机横屏的时候部分会没有css样式的,这也很正常的,因为我只是做demo的,没有做的那么全的匹配,只是想说 响应性web设计匹配就是这么一个意思 一个demo。现在废话不多说了,有兴趣的话,可以看如下demo。

demo下载

1 赞 8 收藏 评论

图片 3

1.前言

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过 JS 的写作建议和技巧,那么今天就来聊聊 CSS 吧!

说到 CSS,每一个网页都离不开 CSS,但是对于 CSS,很多开发者的想法就是,CSS 只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑。但是我觉得 CSS 可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单。在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!

那么今天,就分享下我总结的 CSS 写作建议和性能优化的一些问题!希望能帮让大家对神奇的 CSS 有一个新认识。当然,如果大家觉得还有什么其它的建议,欢迎指点!

之前写过 JS 的写作建议和技巧,那么今天就来聊聊 CSS 吧!

2.CSS 渲染规则

首选,关于CSS 渲染的规则,大家可能都知道,是从右到左的渲染!如下栗子:

.nav h3 a{font-size: 14px;}

1
.nav h3 a{font-size: 14px;}

渲染过程大概是:首先找到所有的a,沿着a的父元素查找h3,然后再沿着h3,查找.nav。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素html都没有匹配,则不再遍历这条路径,从下一个a开始重复这个查找匹配(只要页面上有多个最右节点为a)。

参考:CSS选择器从右向左的匹配规则

说到 CSS,每一个网页都离不开 CSS,但是对于 CSS,很多开发者的想法就是,CSS 只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑。但是我觉得 CSS 可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单。在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!

3.嵌套层级不要超过 3 级

一般情况下,元素的嵌套层级不能超过 3 级,过度的嵌套会导致代码变得臃肿、沉余、复杂,导致 CSS 文件体积变大,造成性能浪费,影响渲染的速度,而且过于依赖 HTML 文档结构。这样的 CSS 样式,维护起来,极度麻烦,如果以后要修改样式,可能要使用!important覆盖。

那么今天,就分享下我总结的 CSS 写作建议和性能优化的一些问题!希望能帮让大家对神奇的 CSS 有一个新认识。当然,如果大家觉得还有什么其它的建议,欢迎指点!

4.样式重置

这个我目前保持中立意见,因为看着网上的文章,有些人支持使用样式重置,有些人不支持使用,谁也说服不了谁。我自己的情况,我有使用样式重置,但是是比较简单的一个总结,代码如下!

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ol, ul { list-style: none; } h1{ font-size: 24px; } h2{ font-size: 20px; } h3{ font-size: 18px; } h4 { font-size: 16px; } h5{ font-size: 14px; } h6{ font-size: 12px; }

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
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
 
ol, ul {
  list-style: none;
}
h1{
  font-size: 24px;
}
 
h2{
  font-size: 20px;
}
 
h3{
  font-size: 18px;
}
 
h4 {
  font-size: 16px;
}
 
h5{
  font-size: 14px;
}
 
h6{
  font-size: 12px;
}

2.CSS 渲染规则

5.样式级别

首先,CSS 样式级别整理如下:

!important > 行内样式 > ID 样式 > Class 样式 > 标签名样式。

然后有一点要提一下就是,组合选择器使用权值会叠加的。比如 ID 的权值是100,Class 是10,标签名是 1(其它不清楚了)!那么div.test-class权值就是 11,div#test就是 101.

比如有一个 div:

<div id="test" class="test-class" style="color:green;"/>

1
<div id="test" class="test-class" style="color:green;"/>

那么样式权值方面就是:

  • div {color: red !improtant;}(大于下面的一切)
  • <div id="test" class="test-class" style="color:black;"></div>(大于 111)
  • div#test.test-class(111)
  • #id.test-class(110)
  • div#test(101)
  • #test(100)
  • div.test-class(11)
  • .test-class(10)
  • div(1)
  • *(小于 1)

首选,关于CSS 渲染的规则,大家可能都知道,是从右到左的渲染!如下栗子:

6.inline-block 的边距

不解释,看图:

图片 4

上面几个p元素marginpadding都为0,但是还有边距。这个的解决方案有两种:

  1. 删除代码之前的空行空格

display:inline-block的元素之前的空行都删除掉,如下写法:

图片 5

  1. 父元素font-size设置为0,这个直接看图:

图片 6

图片 7

1.navh3a{font-size:14px;}

7.图片要设置 width 和 height

如果页面有使用img标签,那么img很建议设置widthheight。目的是为了在网速差或者其它原因加载不出图片的时候,保证布局不会乱。如下栗子,一个很普通的布局。

图片 8

但是万一出现什么情况,图片加载不出来的话,建议的处理方式是第一种,显示一张默认图片,即使不显示默认图片,也让图片有一个占位的作用,保证布局不会乱!

图片 9

图片 10

如果图片加载不出,img又没有设置widthheight的话,就会像下面这样,布局乱了!

图片 11

关于设置widthheight,我顺便说几点:

  1. PC 站,建议在img标签的属性设置widthheight。这样避免加载不出 CSS 而错位;
  2. 手机站,建议用 CSS 设置imgwidthheight,因为手机站要做适配,在属性设置widthheight不灵活,比如使用rem布局,在属性那里设置不了widthheight
  3. 如果图片不固定,但是有一个max-widthmax-height,那么建议在img的父元素设置widthheightimg根据父元素的widthheight设置max-widthmax-height

渲染过程大概是:首先找到所有的a,沿着a的父元素查找h3,然后再沿着h3,查找.nav。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素html都没有匹配,则不再遍历这条路径,从下一个a开始重复这个查找匹配(只要页面上有多个最右节点为a)。

8.任意元素垂直居中

这里只放图,不解释:

8-1. table-cell

图片 12

8-2. flex

图片 13

8-3. position,transform

图片 14

8-4. position,margin

图片 15

这个方式不推荐使用,因为这个写法,.div2的宽高必须要设置,否则就是 100%,比如设置了top:0;bottom:0;效果和设置height:100%;是一样的。如果想要避免,就必须要设置height

参考:CSS选择器从右向左的匹配规则

9.图片预加载

这里说的预加载,不是懒加载。首先根据我个人理解科普下,懒加载和预加载的区别。

  • 懒加载:页面加载的时候,先加载一部分内容(一般是先加载首屏内容),其它内容等到需要加载的时候再进行加载。
  • 预加载:页面加载的时候,先加载一部分内容(一般是先加载首屏内容),其它内容等到先加载的一部分内容(一般是首屏内容)加载完了,再进行加载。

两种方式,都是为了减少用户进入网站的时候,更快的看到首屏的内容。

下面栗子,将这#preloader这个元素加入到到 HTML 中,就可以实现通过 CSS 的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在 Web 页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。

#preloader { /*需要预加载的图片*/ background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat; width: 0px; height: 0px; display: inline; }

1
2
3
4
5
6
7
#preloader {
    /*需要预加载的图片*/
    background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat;
    width: 0px;
    height: 0px;
    display: inline;
}

但是这样会有一个问题,因为#preloader预加载的图片,会和页面上的其他内容一起加载,增加了页面的整体加载时间。所以需要用 JS 控制。

function preloader(urlArr,obj) { var bgText=''; for(var i=0,len=urlArr.length;i<len;i ){ bgText ='url(' urlArr[i] ') no-repeat,'; } obj.style.background=bgText.substr(0,bgText.length-1); } window.onload = function() { preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader')); }

1
2
3
4
5
6
7
8
9
10
function preloader(urlArr,obj) {
    var bgText='';
    for(var i=0,len=urlArr.length;i<len;i ){
        bgText ='url(' urlArr[i] ') no-repeat,';
    }
    obj.style.background=bgText.substr(0,bgText.length-1);
}
window.onload = function() {
   preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader'));
}

原理也很简单,就是先让首屏的图片加载完,然后再加载其它的图片。通过给#preloader设置背景图片,加载所需要的图片,然后页面上需要加载这些图片的时候,就直接从缓存里面拿图片,不需要通过 HTTP 请求获取图片,这样加载就很快。

3.嵌套层级不要超过 3 级

10.慎用 * 通配符

在做网页的时候,经常会使用下面两种方式重置样式,以此来消除标签的默认布局和不同浏览器对于同一个标签的渲染。

*{margin:0;padding:0;}

1
*{margin:0;padding:0;}

上面这种方式,代码少,但是性能差,因为渲染的时候,要匹配页面上所有的元素。很多基础样式没有marginpadding的元素,比如divli等都被匹配,完全没必要。下面看另一种方式:

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}

1
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}

这种方式,代码稍微多,但是性能比上面的方式好。在渲染的时候,只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul这里面的元素,这些元素带有marginpadding,需要重置。

再看例子:

.test * {color: red;}

1
.test * {color: red;}

匹配文档中所有的元素,然后分别向上逐级匹配classtest的元素,直到文档的根节点:

.test a {color: red;}

1
.test a {color: red;}

匹配文档中所有a的元素,然后分别向上逐级匹配classtest的元素,直到文档的根节点。

两种方式,哪种更好不言而喻,所以在开发的时候,建议避免使用通配选择器。

一般情况下,元素的嵌套层级不能超过 3 级,过度的嵌套会导致代码变得臃肿、沉余、复杂,导致 CSS 文件体积变大,造成性能浪费,影响渲染的速度,而且过于依赖 HTML 文档结构。这样的 CSS 样式,维护起来,极度麻烦,如果以后要修改样式,可能要使用!important覆盖。

11.合并、压缩 CSS

这个没什么好解释的,就是压缩和合并 CSS。

首先压缩 CSS,除了使用工具,比如 Gulp、Webpack 等把代码压缩,把空格和换行都去掉。还有一个建议就是属性简写。

比如:

margin-top:0; margin-right:10px; margin-bottom:10px; margin-left:10px; background-image: url('test.jpg'); background-position: top center; background-repeat: no-repeat; border-width:1px; border-style:solid; border-color:#000; color:#0099FF;

1
2
3
4
5
6
7
8
9
10
11
margin-top:0;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
background-image: url('test.jpg');
background-position: top center;
background-repeat: no-repeat;
border-width:1px;
border-style:solid;
border-color:#000;
color:#0099FF;

可以换成下面的:

margin:0 10px 10px 10px; background: url('test.jpg') no-repeat top center; border:1px solid #000; color:#09F;

1
2
3
4
margin:0 10px 10px 10px;
background: url('test.jpg') no-repeat top center;
border:1px solid #000;
color:#09F;      

至于合并的时候,我按照自己的开发习惯给几个建议:

  1. 合并公用的样式。比如项目的头部、底部、侧边栏这些,一般都是公用的,这些可以写在一个公用样式表上,比如main.css
  2. 上面所说的main.css是每一个页面都需要引入,而样式重置表reset.css也是每一个页面都需要用到的,那么建议main.cssreset.css合并成一个文件,给页面引入,减少请求;
  3. 每个页面对应的样式为独立的文件。比如首页对应的是index.css,产品列表页对应的样式是product-list.css。那么index.css就只在首页引入,其它页面不引入,因为引入纯属浪费请求资源,其他页面对应的样式也是这个处理方式。index.cssproduct-list.css等其它页面的样式就保留单独的文件,不作合并处理。

4.样式重置

12.CSS 在 head 引入

浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面。在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 HTML 内容加载完成,这样一来,用户看到页面的时间会更晚。

这个我目前保持中立意见,因为看着网上的文章,有些人支持使用样式重置,有些人不支持使用,谁也说服不了谁。我自己的情况,我有使用样式重置,但是是比较简单的一个总结,代码如下!

13.避免使用 @import

CSS 样式文件有两种引入方式,一种是link元素,另一种是@import。在这里,我建议就是避免使用@import。因为@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时。而且多个@import可能会导致下载顺序紊乱。

比如一个 CSS 文件index.css包含了以下内容:@import url("reset.css")。那么浏览器就必须先把index.css下载、解析和执行后,才下载、解析和执行第二个文件reset.css。简单的解决方法是使用`替代@import`。

1

14.从 PSD 文件思考怎么写代码

接到效果图,先不用着急切图,先看下 PSD 文件。思考下怎么排版,那些模块可以做成公用的模块,模块应该怎么命名,写样式等。当我们拿到设计师给的 PSD 时,首先不要急于写 CSS 代码,首先对整个页面进行分析,先思考下面几点:

  1. 分析页面有哪些模块是公用的。常见公用模块有头部、底部、菜单栏、悬浮按钮等;
  2. 分析模块有什么样式,把公用的样式提取出来,公用样式包括公用的状态样式。比如按钮、输入框、下拉框等公用的选中状态,禁用状态的样式等。

2

15.小图标的处理方案

一个网站肯定会有很多个小图标,对于这些小图标,目前的解决方案有两个,CSS Sprite(雪碧图),字体图标,把图片转成 base64。下面对比一下这两种方式:

  • CSS Sprite:把所有 icon 图片合成一张 png 图片,使用的是在对节点设置宽高,加上bacgroud-position。以背景图方式显展示需要的 icon,如果一个网站有 20 图标,那么就要请求 20 次。使用 CSS Sprite,只需要请求一次,大大的减少了 HTTP 请求。缺点就是管理不灵活,如果需要新增一个图标,都需要改合并图片的源文件,图标定位也要规范,不然容易干扰图片之间的定位;
  • 字体图标:简单粗暴的理解就是把所有的图标当成一个字体处理,这样不用去请求图片。一般是使用 class 来定义图标,要替换图标时,只需更换样式名,管理方便,语意明确,灵活放大缩小,并且不会造成失真,但是只支持单色的图片。
  • base64:另一种方案就是把小的 icon 图片转成 base64 编码,这样可以不用去请求图片,把 base64 编码直接整合到 JS 或者 CSS 里面,可以防止因为一些相对路径,或者图片被不小删除了等问题导致图片 404 错误。但是找个方式会生成一大串的 base64 编码。一般来说,8K 以下的图片才转换成 base64 编码。如果把一张 50K 的图片转成 base64 编码,那么会生成超过 65000 个字符的 base64 编码,字符的大小就已经是将近 70K 了!建议就是:8K 以下的图片才转换成 base64 编码。

3

16.不要在 ID 选择器前面进行嵌套或写标签

  1. ID 在页面上本来就是唯一的,而且人家权值那么大,前方嵌套(.content #test)完全是浪费性能,以及多写一些没有意义的代码。这个虽然是一句话,但是还是有人犯这样的错。
  2. 除了嵌套,在 ID 的前面也不需要加标签或者其它选择器。比如div#test或者.test#test。这两种方式完全是多余的,理由就是 ID 在页面就是唯一的。前面加任何东西都是多余的!

4

17.把常用样式抽封装成公用样式

把长段相同样式提取出来作为公用样式使用,比如常用的清除浮动,单行超出显示省略号,多行超出省略号等。

如下栗子:

CSS

/*超出省略号*/ /*<p class='text-ellipsis'></p>*/ .text-ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*清除浮动*/ /*<div class='clearfix'></div>*/ .clearfix:after { display: block; content: ''; clear: both; height:0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*超出省略号*/
/*<p class='text-ellipsis'></p>*/
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*清除浮动*/
/*<div class='clearfix'></div>*/
.clearfix:after {
    display: block;
    content: '';
    clear: both;
    height:0;
}

 

5

18.CSS3 动画的优化

在我之前一篇文章(移动 Web 开发问题和优化小结),也有写过关于这个的优化建议,之前说的两个建议是:

  1. CSS3 动画或者过渡尽量使用transformopacity来实现动画,不要使用lefttop
  2. 动画和过渡能用CSS3解决的,就不要使用JS。如果是复杂的动画可以使用CSS3 JS(或者HTML5 CSS3 JS)配合开发,效果只有想不到,没有做不到。

下面补充一个:动画不宜过多,尤其是手机网站,否则会出现性能的问题.比如 CPU 一下子就被占用满了,掉帧等。而且,不建议给每一个元素都使用硬件加速。

参考链接:

  • CSS Animation 性能优化
  • CSS3 动画性能优化
  • CSS 动画之硬件加速
  • Web 动画

6

19.Body 设置最小宽度

这个是在 PC 站会出现的问题,应该大家都知道。下面简单说一下!

比如下面的栗子,一个网站,页面内容宽度是 1200px。看着很正常,没什么特别:

图片 16

如果这个时候,把页面窗口缩小。小于 1200px,页面出现滚动条,然后把滚动条拖到最右边:

图片 17

这样是不是就发现,顶部的图片和背景有一部分是断层了!解决这个问题也很简单,就是给body加上min-width。值就是页面宽度的值:body{min-width:1200px;}

重复上一步操作,无论怎么改变浏览器窗口大小,都是正常的:

图片 18

之所以会出现这样的问题,是因为,比如窗口缩小到 900px 的时候,小于内容宽度的 1200px。就是出现横向的滚动条,但是body的宽度是 900px。这个时候,如果有元素(比如图片的灰色区域和粉红色的图片)是相对bodywidth设置 100%,那么实际上这些元素的宽度也就是 900px。所以会出现断层那些的视觉!解决方式就是给body加上min-width。让body的宽度最小不会小于内容的宽度!

7

20.小结

关于我对 CSS 写作建议和性能优化的一个总结,就到这里了。CSS 绝对不是那种只要能用就行,或者只要能用 CSS 把布局弄好就行的一门语言。CSS 给我的感觉,就是上手很简单,但是如果想用好 CSS,还是得花时间去研究。CSS 或者 CSS3,能够优化的东西还有很多,用好 CSS 或者 CSS3 能够少写很多 JS 代码,做出来的东西也是很神奇,大家还是得继续学习当中的知识。

如果大家觉得我文章有哪个地方写得不好,写错了,欢迎指正。如果有什么其它的建议,欢迎指点,让大家互相交流,互相学习,一起进步!最后,祝大家节日快乐!

1 赞 5 收藏 评论

图片 19

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

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{

margin:0;

padding:0;

}

h1,h2,h3,h4,h5,h6{

font-weight:normal;

}

ol,ul{

list-style:none;

}

h1{

font-size:24px;

}

h2{

font-size:20px;

}

h3{

font-size:18px;

}

h4{

font-size:16px;

}

h5{

font-size:14px;

}

h6{

font-size:12px;

}

5.样式级别

首先,CSS 样式级别整理如下:

!important> 行内样式 > ID 样式 > Class 样式 > 标签名样式。

然后有一点要提一下就是,组合选择器使用权值会叠加的。比如 ID 的权值是100,Class 是10,标签名是 1(其它不清楚了)!那么div.test-class权值就是 11,div#test就是 101.

比如有一个 div:

1

那么样式权值方面就是:

div {color: red !improtant;}(大于下面的一切)

(大于 111)

div#test.test-class(111)

#id.test-class(110)

div#test(101)

#test(100)

div.test-class(11)

.test-class(10)

div(1)

*(小于 1)

6.inline-block 的边距

不解释,看图:

图片 20

上面几个p元素margin和padding都为0,但是还有边距。这个的解决方案有两种:

删除代码之前的空行空格

带display:inline-block的元素之前的空行都删除掉,如下写法:

图片 21

父元素font-size设置为0,这个直接看图:

图片 22

图片 23

7.图片要设置 width 和 height

如果页面有使用img标签,那么img很建议设置width和height。目的是为了在网速差或者其它原因加载不出图片的时候,保证布局不会乱。如下栗子,一个很普通的布局。

图片 24

但是万一出现什么情况,图片加载不出来的话,建议的处理方式是第一种,显示一张默认图片,即使不显示默认图片,也让图片有一个占位的作用,保证布局不会乱!

图片 25

图片 26

如果图片加载不出,img又没有设置width和height的话,就会像下面这样,布局乱了!

图片 27

关于设置width和height,我顺便说几点:

PC 站,建议在img标签的属性设置width和height。这样避免加载不出 CSS 而错位;

手机站,建议用 CSS 设置img的width和height,因为手机站要做适配,在属性设置width和height不灵活,比如使用rem布局,在属性那里设置不了width和height;

如果图片不固定,但是有一个max-width和max-height,那么建议在img的父元素设置width和height。img根据父元素的width和height设置max-width和max-height。

8.任意元素垂直居中

这里只放图,不解释:

8-1. table-cell

图片 28

8-2. flex

图片 29

8-3. position,transform

图片 30

8-4. position,margin

图片 31

这个方式不推荐使用,因为这个写法,.div2的宽高必须要设置,否则就是 100%,比如设置了top:0;bottom:0;效果和设置height:100%;是一样的。如果想要避免,就必须要设置height。

9.图片预加载

这里说的预加载,不是懒加载。首先根据我个人理解科普下,懒加载和预加载的区别。

懒加载:页面加载的时候,先加载一部分内容(一般是先加载首屏内容),其它内容等到需要加载的时候再进行加载。

预加载:页面加载的时候,先加载一部分内容(一般是先加载首屏内容),其它内容等到先加载的一部分内容(一般是首屏内容)加载完了,再进行加载。

两种方式,都是为了减少用户进入网站的时候,更快的看到首屏的内容。

下面栗子,将这#preloader这个元素加入到到 HTML 中,就可以实现通过 CSS 的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在 Web 页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。

1

2

3

4

5

6

7

#preloader {

/*需要预加载的图片*/

background:url(image1.jpg)no-repeat,url(image2.jpg)no-repeat,url(image3.jpg)no-repeat;

width:0px;

height:0px;

display:inline;

}

但是这样会有一个问题,因为#preloader预加载的图片,会和页面上的其他内容一起加载,增加了页面的整体加载时间。所以需要用 JS 控制。

1

2

3

4

5

6

7

8

9

10

functionpreloader(urlArr,obj){

varbgText='';

for(vari=0,len=urlArr.length;i

bgText ='url(' urlArr[i] ') no-repeat,';

}

obj.style.background=bgText.substr(0,bgText.length-1);

}

window.onload=function(){

preloader(['image1.jpg','image2.jpg','image3.jpg'],document.getElementById('preloader'));

}

原理也很简单,就是先让首屏的图片加载完,然后再加载其它的图片。通过给#preloader设置背景图片,加载所需要的图片,然后页面上需要加载这些图片的时候,就直接从缓存里面拿图片,不需要通过 HTTP 请求获取图片,这样加载就很快。

10.慎用 * 通配符

在做网页的时候,经常会使用下面两种方式重置样式,以此来消除标签的默认布局和不同浏览器对于同一个标签的渲染。

1*{margin:0;padding:0;}

上面这种方式,代码少,但是性能差,因为渲染的时候,要匹配页面上所有的元素。很多基础样式没有margin和padding的元素,比如div,li等都被匹配,完全没必要。下面看另一种方式:

1body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}

这种方式,代码稍微多,但是性能比上面的方式好。在渲染的时候,只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul这里面的元素,这些元素带有margin和padding,需要重置。

再看例子:

1.test *{color:red;}

匹配文档中所有的元素,然后分别向上逐级匹配class为test的元素,直到文档的根节点:

1.testa{color:red;}

匹配文档中所有a的元素,然后分别向上逐级匹配class为test的元素,直到文档的根节点。

两种方式,哪种更好不言而喻,所以在开发的时候,建议避免使用通配选择器。

11.合并、压缩 CSS

这个没什么好解释的,就是压缩和合并 CSS。

首先压缩 CSS,除了使用工具,比如 Gulp、Webpack 等把代码压缩,把空格和换行都去掉。还有一个建议就是属性简写。

比如:

1

2

3

4

5

6

7

8

9

10

11

margin-top:0;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

background-image:url('test.jpg');

background-position:topcenter;

background-repeat:no-repeat;

border-width:1px;

border-style:solid;

border-color:#000;

color:#0099FF;

可以换成下面的:

1

2

3

4

margin:010px10px10px;

background:url('test.jpg')no-repeattopcenter;

border:1pxsolid#000;

color:#09F;

至于合并的时候,我按照自己的开发习惯给几个建议:

合并公用的样式。比如项目的头部、底部、侧边栏这些,一般都是公用的,这些可以写在一个公用样式表上,比如main.css;

上面所说的main.css是每一个页面都需要引入,而样式重置表reset.css也是每一个页面都需要用到的,那么建议main.css和reset.css合并成一个文件,给页面引入,减少请求;

每个页面对应的样式为独立的文件。比如首页对应的是index.css,产品列表页对应的样式是product-list.css。那么index.css就只在首页引入,其它页面不引入,因为引入纯属浪费请求资源,其他页面对应的样式也是这个处理方式。index.css、product-list.css等其它页面的样式就保留单独的文件,不作合并处理。

12.CSS 在 head 引入

浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面。在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 HTML 内容加载完成,这样一来,用户看到页面的时间会更晚。

13.避免使用 @import

CSS 样式文件有两种引入方式,一种是link元素,另一种是@import。在这里,我建议就是避免使用@import。因为@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时。而且多个@import可能会导致下载顺序紊乱。

比如一个 CSS 文件index.css包含了以下内容:@import url("reset.css")。那么浏览器就必须先把index.css下载、解析和执行后,才下载、解析和执行第二个文件reset.css。简单的解决方法是使用替代@import。

14.从 PSD 文件思考怎么写代码

接到效果图,先不用着急切图,先看下 PSD 文件。思考下怎么排版,那些模块可以做成公用的模块,模块应该怎么命名,写样式等。当我们拿到设计师给的 PSD 时,首先不要急于写 CSS 代码,首先对整个页面进行分析,先思考下面几点:

分析页面有哪些模块是公用的。常见公用模块有头部、底部、菜单栏、悬浮按钮等;

分析模块有什么样式,把公用的样式提取出来,公用样式包括公用的状态样式。比如按钮、输入框、下拉框等公用的选中状态,禁用状态的样式等。

15.小图标的处理方案

一个网站肯定会有很多个小图标,对于这些小图标,目前的解决方案有两个,CSS Sprite(雪碧图),字体图标,把图片转成 base64。下面对比一下这两种方式:

CSS Sprite:把所有 icon 图片合成一张 png 图片,使用的是在对节点设置宽高,加上bacgroud-position。以背景图方式显展示需要的 icon,如果一个网站有 20 图标,那么就要请求 20 次。使用 CSS Sprite,只需要请求一次,大大的减少了 HTTP 请求。缺点就是管理不灵活,如果需要新增一个图标,都需要改合并图片的源文件,图标定位也要规范,不然容易干扰图片之间的定位;

字体图标:简单粗暴的理解就是把所有的图标当成一个字体处理,这样不用去请求图片。一般是使用 class 来定义图标,要替换图标时,只需更换样式名,管理方便,语意明确,灵活放大缩小,并且不会造成失真,但是只支持单色的图片。

base64:另一种方案就是把小的 icon 图片转成 base64 编码,这样可以不用去请求图片,把 base64 编码直接整合到 JS 或者 CSS 里面,可以防止因为一些相对路径,或者图片被不小删除了等问题导致图片 404 错误。但是找个方式会生成一大串的 base64 编码。一般来说,8K 以下的图片才转换成 base64 编码。如果把一张 50K 的图片转成 base64 编码,那么会生成超过 65000 个字符的 base64 编码,字符的大小就已经是将近 70K 了!建议就是:8K 以下的图片才转换成 base64 编码。

16.不要在 ID 选择器前面进行嵌套或写标签

ID 在页面上本来就是唯一的,而且人家权值那么大,前方嵌套(.content #test)完全是浪费性能,以及多写一些没有意义的代码。这个虽然是一句话,但是还是有人犯这样的错。

除了嵌套,在 ID 的前面也不需要加标签或者其它选择器。比如div#test或者.test#test。这两种方式完全是多余的,理由就是 ID 在页面就是唯一的。前面加任何东西都是多余的!

17.把常用样式抽封装成公用样式

把长段相同样式提取出来作为公用样式使用,比如常用的清除浮动,单行超出显示省略号,多行超出省略号等。

如下栗子:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/*超出省略号*/

/**/

.text-ellipsis{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

/*清除浮动*/

/*

*/

.clearfix:after{

display:block;

content:'';

clear:both;

height:0;

}

18.CSS3 动画的优化

在我之前一篇文章(移动 Web 开发问题和优化小结),也有写过关于这个的优化建议,之前说的两个建议是:

CSS3 动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top;

动画和过渡能用CSS3解决的,就不要使用JS。如果是复杂的动画可以使用CSS3 JS(或者HTML5 CSS3 JS)配合开发,效果只有想不到,没有做不到。

下面补充一个:动画不宜过多,尤其是手机网站,否则会出现性能的问题.比如 CPU 一下子就被占用满了,掉帧等。而且,不建议给每一个元素都使用硬件加速。

参考链接:

CSS Animation 性能优化

CSS3 动画性能优化

CSS 动画之硬件加速

Web 动画

19.Body 设置最小宽度

这个是在 PC 站会出现的问题,应该大家都知道。下面简单说一下!

比如下面的栗子,一个网站,页面内容宽度是 1200px。看着很正常,没什么特别:

如果这个时候,把页面窗口缩小。小于 1200px,页面出现滚动条,然后把滚动条拖到最右边:

这样是不是就发现,顶部的图片和背景有一部分是断层了!解决这个问题也很简单,就是给body加上min-width。值就是页面宽度的值:body{min-width:1200px;}

重复上一步操作,无论怎么改变浏览器窗口大小,都是正常的:

之所以会出现这样的问题,是因为,比如窗口缩小到 900px 的时候,小于内容宽度的 1200px。就是出现横向的滚动条,但是body的宽度是 900px。这个时候,如果有元素(比如图片的灰色区域和粉红色的图片)是相对body的width设置 100%,那么实际上这些元素的宽度也就是 900px。所以会出现断层那些的视觉!解决方式就是给body加上min-width。让body的宽度最小不会小于内容的宽度!

20.小结

关于我对 CSS 写作建议和性能优化的一个总结,就到这里了。CSS 绝对不是那种只要能用就行,或者只要能用 CSS 把布局弄好就行的一门语言。CSS 给我的感觉,就是上手很简单,但是如果想用好 CSS,还是得花时间去研究。CSS 或者 CSS3,能够优化的东西还有很多,用好 CSS 或者 CSS3 能够少写很多 JS 代码,做出来的东西也是很神奇,大家还是得继续学习当中的知识。

如果大家觉得我文章有哪个地方写得不好,写错了,欢迎指正。如果有什么其它的建议,欢迎指点,让大家互相交流,互相学习,一起进步!

图片 32

本文由pc28.am发布于前端技术,转载请注明出处:作文提出和属性优化小结,响应式Web设计实战总

上一篇:后生可畏种高效编写HTML,CSS代码快捷编写手艺 下一篇:没有了
猜你喜欢
热门排行
精彩图文