概念部分
1.响应式页面的由来
在很久很久以前,我们做的网页只是为了PC端的观看、使用,直到2000年,2.5G手机的出现,人们可以通过手机来访问网络,使得服务商们纷纷做了另一套网页为手机访问服务,这个情况一直持续到2009年,3G智能手机的出现,手机可以访问PC端页面,只是对PC端页面进行了压缩,接着IOS提出了viewport(视口)的概念,才得以改进,大型网页可以不经缩放直接显示在手机——只是需要用户左右滑动屏幕,来看到更多的内容。
2010年,响应式网页概念被提出了:一个网页,可以适应各种不同的屏幕。响应式网页一般适合于企业门户、电子政务、资讯类….一屏下内容不是非常多的页面;但是不适合于京东首页等大型页面。
2.如何制作响应式页面
非常简单!
方法1:使用已有的响应式网页框架,如bootstrap;(框架官网都有使用的介绍)
这里说一个事情:框架都是人写的!不单单要会用框架,一个合格的前端开发工程师应该明白原理到底是怎么样的!!
我们用的框架都是业内大的公司自己用着不错,然后分享出来的。
方法2:手写呗;
- a:声明页面viewport标签—-响应式页面的前提条件
1 | <!--device指设备,initial-scale指打开的缩放比例,user-scalable指用户是否可以缩放--> |
- b:使用响应式图片
1 | /*只是举例而已,max-width是图片在页面缩小到影响自身大小时,图片的最大宽度,但不会超过自身图片的原有宽度*/ |
c:使用流式布局
布局元素使用浮动float或者行内块 inline-block;
ps:个人建议使用行内块,第一不影响其余元素的布局,第二方便设置。但行内块有个小小的问题,就是垂直对齐,vertical-align要根据实际情况设置。
d:避免使用绝对尺寸(px等),使用相对单位(如rem/em/%);
ps:这里科普一下,我们都知道em是根据 父级元素 字体的大小来计算的,而rem更狠是根据 根元素 的字体大小来计算,所以推荐使用rem,减少使用em计算的难度。。f:使用CSS3 MediaQuery技术
3.使用CSS3 MediaQuery技术编写响应式网页—核心部分
CSS3 MediaQuery:根据当前浏览设备的特性有选择性执行某些CSS样式,而忽略其他一些样式。
具体使用方法
a:选择性执行外部CSS文件:1
<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css"/>
特点:只有媒体查询结果为真的外部样式文件才会被执行,否则不执行!
我们发现即使不符合当前浏览设备的外部样式文件,也会被浏览器请求,这个缺点严重拖慢了页面加载速度,让我们程序员不爽的事情,一定要改。
b: 有选择性的执行CSS中的部分样式:1
2
3
4
5
6@media screen and (min-width:768px) and (max-width:991px) {
.box {
margin: 6px;
...
}
}
这个方法就完美了。即能响应式的加载页面,又不会太过拖累页面加载速度。
今天的博客就到这里,欠了好多天的。。。慢慢补上来~