响应式布局

作用:

  1. 让一个网站可以兼容不同分辨率的设备
  2. 给用户更好的视觉使用体验

优缺点

  • 优点:解决了设备之间的差异化展示
  • 缺点:兼容性代码多,工作量大,加载速度受影响

原则

  1. 移动设备优先:在设计初期就要考虑页面如何在多终端显示
  2. 渐进增强:充分发挥硬件设备的最大功能

如何实现响应式布局

  1. CSS3-Media Query

    	/*当屏幕尺寸大于480px时候,背景颜色是蓝色*/
    	@media screen and(min-width:480px){
    		body{
    			background-color:blue
    		}
    	}
    	/*当屏幕尺寸小于480px时候,背景颜色是蓝色*/
    	@media screen and(max-width:480px){
    		body{
    			background-color:red
    		}
    	}
    
  2. 第三方开源框架(bootstrap)
    要使用bootstrap需要将bootstrap的一些文件引入到html文件里,我们可以去Bootstrap官网下载这些文件。或者不下载也可以通过用BootCDN的方式引入,只需要一个链接就可以了。
    引入bootstrap.min.css jquery.min.js bootstrap.min.js,第五行的标签是用来支持移动设备响应式布局的。
    ⚠️:jquery.min.js文件必须放在bootstrap.min.js之前,因为bootstrap的js组件依赖jquery。
    ⚠️:不用bootstrap的js组件,只要响应式布局,只需要引入bootstrap.min.css就OK

  3. 借助原生JavaScript(IE6、7、8,成本高,不推荐使用)

你可能感兴趣的:(CSS类)