css响应式网站实现原理

来源:luqidong 发布时间:2014-02-24 21:01:43 点击数:

现在随着移动端的普及很多网站都用了响应式的布局设计。所谓的响应式就是根据客户端浏览器的大小来调整页面的样式和结构使其界面更加的友好用户体验更加的完善。一般如果你不做响应式的话,那么不能根据浏览器的大小聊调整,这样的话用户体验就会很差。或者做了2个页面,更具不同的客户端来加载不同的页面,比如一个手机一个电脑等。

 

其实可以这样来搞我们来给几个浏览器的大小来选择几个固定的设计样式,然后通过脚本来更换加载css的样式,比如我们在1920*1080的时候加载的是style.css而当分辨率是1024*800的时候删除或者隐藏某些页面元素然后控制其他元素的大小使其自适应,但是动态的加载css不是一个好的选择,因为这样会耗系统的资源,我们一般的做法就是根据浏览器的大小用脚本来更改body的类名,这样的话我们可以利用css的优先级的权限来设置样式,因为嫁了body的类名 那么body下面的类名会比一般的类名优先级高所以会有响应式的效果。

本文由免费oa系统78oa原创,转载请注明出处。