- 1、本文档共12页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行.为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本.也就是说一个页面可以在多个终端显现出你想要的效果,能够兼容各个终端. 响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强. 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面. 缺点: 兼容各种设备工作量大,效率低下. 代码累赘,会出现隐藏无用的元素,加载时间加长. 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果. 因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨 识度不强 利用CSS3-Media Query实现响应式布局 1.media query: 通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精 确作用于不同的媒体类型和同一媒体的不同条件 2.语法结构及用法: @media设备名only(选取条件)not(选取条件)and(设备选取条件),设 备二{sRules} (1)在link中使用@media: link rel=stylesheet type=text/css media=screen and (max-width:600px) href=link.css / (2)在样式表中内嵌@media: @media screen and(max-width:600px){ 选择器{ 属性:属性值; } } css3媒体查询语法: /*@media screen and (min-width:1440px) and (max-width:1600px){}*/ @media screen and (min-width:1440px){ /*大于等于1440*/ /*这里是特定的样式表*/ body,input,textarea,select,small,a{font-size:14px;} } @media screen and (max-width:1024px){ } @media screen and (max-width:768px){ /*不大于768px的设备尺寸中 响应式布局的特定样式*/ } @media screen and (max-width:360px){ } @media screen and (max-width:320px){ } 看了这几个 写法是不是感觉响应式布局不过如此,哈哈,其实就是这么简单。 Media Query语法详解 link rel=stylesheet media=screen and(max-width:600px) href=small.css / 1.screen:指的是一种媒体类型; 2.and:被称为关键词,与其相似的还有not,only.可能的操作符 3.max-width:600px这个就是属性值,媒体特性,也就是媒体条件. 最后要注意的是在页面的头部head/head之间加上下面这句∶ meta name=“viewport” content=“width=device-width; initial-scale=1.0” meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。 参数设置∶ width – viewport的宽度 height – viewport的高度 initial-scale – 初始的缩放比例 minimum-scale – 允许用户缩放到的最小比例 maximum-scale – 允许用户缩放到的最大比例 user-scalable – 用户是否可以手动缩放
您可能关注的文档
- Communication with Parents.ppt
- CorelDRAW 快捷键全攻略.doc
- CORELDRAW-X4绘制卡通衣服1.ppt
- CorelDRAW_X4_快捷键牢记学习大全.doc
- 2012-8-9-金科王府之女人季活动方案.ppt
- core快捷大全.doc
- COPD与支气管哮喘辨.ppt
- CP1-CA2装配技能竞赛试题库.doc
- 2012ji 一轮复习——细胞呼吸.ppt
- CP1210029LQ定稿IP001-通过单个按钮模拟键盘输入序列的实现.doc
- 2023学年诸暨中学高三年级第二学期3月第二次模拟考试(政治)公开课教案教学设计课件资料.docx
- 运动的合成与分解(二)公开课教案教学设计课件资料.pptx
- 近五年浙江省各地图形的翻折(轴对称)原题公开课教案教学设计课件资料.doc
- 如何做教师-2019-11-13-中关村一小相关公开课教案教学设计课件资料.pptx
- 生活中的圆周运动 (水平面)正式版公开课教案教学设计课件资料.pptx
- 专题10 条件概率与全概率公式公开课教案教学设计课件资料.docx
- 金华市东阳市2019学年第二学期期末测试卷公开课教案教学设计课件资料.doc
- 5 琥珀(第二课时)【慕课堂版】公开课教案教学设计课件资料.pptx
- 项目五 打印米老鼠模型公开课教案教学设计课件资料.ppt
- (打印版)9月25日地理周练公开课教案教学设计课件资料.docx
文档评论(0)