css3响应式布局简介.pptVIP

响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行.为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本.也就是说一个页面可以在多个终端显现出你想要的效果,能够兼容各个终端. 响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强. 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面. 缺点: 兼容各种设备工作量大,效率低下. 代码累赘,会出现隐藏无用的元素,加载时间加长. 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果. 因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨 识度不强 利用CSS3-Media Query实现响应式布局 1.media query: 通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精 确作用于不同的媒体类型和同一媒体的不同条件 2.语法结构及用法: @media设备名only(选取条件)not(选取条件)and(设备选取条件),设 备二{sRules} (1)在link中使用@media: link rel=stylesheet type=text/css media=s