css响应式页面实现

响应式页面

---

概念部分

1.响应式页面的由来

在很久很久以前，我们做的网页只是为了PC端的观看、使用，直到2000年，2.5G手机的出现，人们可以通过手机来访问网络，使得服务商们纷纷做了另一套网页为手机访问服务，这个情况一直持续到2009年，3G智能手机的出现，手机可以访问PC端页面，只是对PC端页面进行了压缩，接着IOS提出了viewport(视口)的概念，才得以改进，大型网页可以不经缩放直接显示在手机——只是需要用户左右滑动屏幕，来看到更多的内容。

2010年，响应式网页概念被提出了：一个网页，可以适应各种不同的屏幕。响应式网页一般适合于企业门户、电子政务、资讯类….一屏下内容不是非常多的页面；但是不适合于京东首页等大型页面。

2.如何制作响应式页面

非常简单！

方法1：使用已有的响应式网页框架，如bootstrap;（框架官网都有使用的介绍）

    这里说一个事情:框架都是人写的！不单单要会用框架，一个合格的前端开发工程师应该明白原理到底是怎么样的！！    我们用的框架都是业内大的公司自己用着不错，然后分享出来的。

方法2：手写呗；

• a:声明页面viewport标签—-响应式页面的前提条件

<!--device指设备，initial-scale指打开的缩放比例，user-scalable指用户是否可以缩放--><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

• b:使用响应式图片

/*只是举例而已，max-width是图片在页面缩小到影响自身大小时，图片的最大宽度，但不会超过自身图片的原有宽度*/img{    max-width:50%;/*防止图片无限放大产生失真*/}

1. c:使用流式布局
   布局元素使用浮动float或者行内块 inline-block;
   ps:个人建议使用行内块，第一不影响其余元素的布局，第二方便设置。
   但行内块有个小小的问题，就是垂直对齐，vertical-align要根据实际情况设置。

2. d:避免使用绝对尺寸（px等）,使用相对单位（如rem/em/%）;
   ps:这里科普一下，我们都知道em是根据 父级元素 字体的大小来计算的，而rem更狠是根据 根元素 的字体大小来计算，所以推荐使用rem，减少使用em计算的难度。。

3. f：使用CSS3 MediaQuery技术

3.使用CSS3 MediaQuery技术编写响应式网页—核心部分

CSS3 MediaQuery：根据当前浏览设备的特性有选择性执行某些CSS样式，而忽略其他一些样式。

具体使用方法

a:选择性执行外部CSS文件：

<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css"/>

特点：只有媒体查询结果为真的外部样式文件才会被执行，否则不执行！

我们发现即使不符合当前浏览设备的外部样式文件，也会被浏览器请求，这个缺点严重拖慢了页面加载速度，让我们程序员不爽的事情，一定要改。

b: 有选择性的执行CSS中的部分样式：

@media screen and (min-width:768px) and (max-width:991px) {    .box {        margin: 6px;        ...    }}

这个方法就完美了。即能响应式的加载页面，又不会太过拖累页面加载速度。

今天的博客就到这里，欠了好多天的。。。慢慢补上来~