PC端响应式设计

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局，就是按照一定的规则让网页适配不同屏幕或窗口的大小

之前只是简单的了解了一下响应式设计的原理，但是没有实践，在智家官网这个项目中才真正的学习到了响应式设计的精髓，智家官网地址：http://jia.qq.com

原理

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

技术

响应式设计在屏幕大小改变的时候要把最重要的内容放在最醒目的地方，一般会写多套样式，在智家官网这个项目用的是使用js来控制css样式

1. 采用CSS的media query技术（针对有限几种设定的屏幕尺寸）
   例如在电脑显示器的大小，min-width: 最小宽度，当显示器宽度小于640px时加载media query里的样式

   @media screen and (min-width:640px) {
   	body{
   		background: red;
   	}
   }

2. 使用框架，例如Bootstrap

3. 另一种方法就是用js来实现在不同屏幕下使用某一套样式，将元素的大小和间距设为原来的百分比
   在使用js来控制的时候要设置rem单位根元素 因为在智慧场景页面需要一屏滚动，所以这里是根据高来设置rem单位根元素

   ;(function(doc, win) {
   	var docEl = doc.documentElement;
   	var curHeight = 0;
   	var recalc = function() {
   	var clientHeight = docEl.clientHeight;
   	clientHeight = Math.min(1080, clientHeight);
   	if (!clientHeight) {return;}
   	if (curHeight !== clientHeight) {
   		curHeight = clientHeight;
   		docEl.style.fontSize = (Math.floor(100 * (curHeight / 810))) + 'px';
   	}
   		var win = $(window);
   		var wWidth = win.width();
   		var wHeight = win.height();
   		$('.swiper-wrapper .swiper-slide').css({
   			width: wWidth + 'px',
   			height: wHeight + 'px'
   		});
   		$('.swiper-wrapper .swiper-slide').css({
   			width: wWidth + 'px',
   			height: wHeight + 'px'
   		})
   	};
   	if (!doc.addEventListener){return;}
   	try{recalc();}catch(e){}
   	win.addEventListener('resize', recalc, false);
   	doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

使用js动态添加类，当宽度小于1240px时加上”.page960”的样式

(function() {
	var win = $(window);
	var body = $(document.body);
	var checkSize = function() {
		var wWidth = win.width() || 0;
		var wHeight = win.height() || 0;
		var mediaNodes = $('.media-layout');
		if (wWidth < 1240) {
			body.addClass('page960');
		} else {
			body.removeClass('page960');
		}
		if (wWidth < 1240 || wHeight < 810) {
			mediaNodes.addClass('page960');
		} else {
			mediaNodes.removeClass('page960');
		}
	};
	checkSize();
	$(checkSize);
	win.on('resize', checkSize);
})();

基本规则

1. 可伸缩的内容区块：内容区块在一定程度上能够自动调整，一确保填满整个页面
2. 可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
3. 适应页面尺寸的边距：当页面尺寸发生更大变化时，区块的边距也应该变化
4. 能够适应比例变化的图片：对于常见的宽度调整，图片在隐藏两边内容时，依旧保持美观可用
5. 能够自动隐藏/部分显示的内容：如在大屏幕电脑上显示大段的描述文本，在小屏幕或者手机上只能少量显示或全部隐藏
6. 能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
7. 灵活使用尺寸单位：px rem

技巧

1. 一些在不同屏幕下都可以展示的元素就可以不需要有多套样式
   eg：在智家官网的这个响应式网站中头部的导航和底部的copyright 都是不需要缩放的，另外还有一些小图标可以在大屏幕和小屏幕上都能正常显示的也不需要调整
2. 如果位于中线两边的元素可以根据中线布局，这样在屏幕缩放的过程中还是在中间而不是向两边居中
   eg：这个是针对有大背景图，元素里的内容比较简单清晰的情况
3. 一个大块里面的内容可以把子元素看为单个的元素根据父元素布局，这样在缩放的过程中可以只改变父元素的位置
4. 一屏滑动的需要把大小和间距设为百分比
5. 在实现响应式的同时针对某一部分可能会用到不同的解决方案，有百分比，有rem，有的不需要改变

赏

谢谢你请我吃糖果

支付宝

微信