- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
;响应式设计概述;前面讲解了如何使用HTML5、CSS3和JavaScript来制作网页。
在HTML5和CSS3的知识基础上,讲解一种新型的网页设计理念——响应式Web设计。响应式网站可以针对不同的终端显示出合理的页面,实现一次开发,多处适用。
响应式Web设计之所以称之为新理念,是因为响应式不仅是一种跨终端的网页开发技术,它还颠覆了之前的网页设计思想。
;响应式Web设计需要考虑页面在PC端和移动端设备上的呈现效果;移动端页面的显示效果与移动端设备的视口有关。
本节主要讲解响应式Web设计基础内容,包括视口、媒体查询,为实现响应式页面打下基础。;视口:由苹果公司为了让iPhone的小屏幕尽可能完整显示整个网页;
视口的作用:不管网页原始的分辨率尺寸有多大,都能将其缩小显示在终端浏览器上;
移动端三种视口:布局视口、视觉视口和理想视口。;(01)布局视口
布局视口(也叫视窗视口):指浏览器绘制网页的视口,一般移动端浏览器都默认设置了布局视口的宽度。
布局视口存在的问题:当移动端浏览器展示PC端网页内容时,由于移动端设备屏幕比较小,网页在手机的浏览器中会出现左右滚动条,用户需要左右滑动才能查看完整的一行内容。;布局视口;视觉视口;理想视口;(04)设置视口:
HTML5中,将meta标签中的name属性设为viewport,即可设置视口。示例语法:
metaname=viewportcontent=user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0
;(05)视口的属性
height:视口的高度;
width:视口的宽度;
device-height:设备屏幕的输出高度;
device-width:设备屏幕的输出宽度;
initial-scale:初始比例,页面加载时的默认比例1.0;
;(01)媒体查询由媒体类型和条件表达式组成
示例语法
style
@mediascreenand(max-width:960px){
/*样式设置*/
}
/style
;设备划分;(03)示例6-1
使用媒体查询实现网页背景颜色在不同屏幕尺寸的切换,在chapter06目录下新建demo6-1.html文件。;/*剩余代码*/???
?/*?小屏幕(大于等于576px)?*/
????@media?screen?and?(min-width:?576px)?{
??????body?{background-color:?yellow;?}
????}
????/*?中等屏幕(大于等于768px)?*/
????@media?screen?and?(min-width:?768px)?{
??????body?{?background-color:?grey;}
????};????/*?大屏幕(大于等于992px)?*/
????@media?screen?and?(min-width:?992px)?{
??????body?{?background-color:?pink;?}
????}
????/*?超大屏幕(大于等于1200px)?*/
????@media?screen?and?(min-width:?1200px)?{
??????body?{?background-color:?yellowgreen;}
????};超小屏幕;
您可能关注的文档
- 现代殡葬技术与管理专业群课程主题设计期空间规划.pptx
- 现代殡葬技术与管理专业群课程主题设计期设计元素提取.pptx
- 现代殡葬技术与管理专业群课程主题设计期深化设计.pptx
- 现代殡葬技术与管理专业群课程主题设计期现场勘测.pptx
- 现代殡葬技术与管理专业群课程主题设计前期设计任务书.pptx
- 现代殡葬技术与管理专业群课程主题设计前期市场调查.pptx
- 现代殡葬技术与管理专业群课程主题身体素质要求.pptx
- 现代殡葬技术与管理专业群课程主题识记.pptx
- 现代殡葬技术与管理专业群课程主题室内设计师的职业素质与能力.pptx
- 现代殡葬技术与管理专业群课程主题手锤和旋具的认识与使用.pptx
- 小学数学教学案例课程第一章如何使用主题图.docx
- 幼儿园师资培训《多样举措提升教师自身的师幼互动能力》PPT课件 (1).pptx
- 如何预防食物中毒PPT课件.pptx
- 幼儿园师资培训《幼儿园建构游戏观察与指导要点》PPT课件.pptx
- 幼儿园小班科学公开课《颜色变变变》PPT课件附教案及教具打印素材.pptx
- 自考本科《小学教师专业发展》第五章职前小学教师专业准备PPT课件讲义.pptx
- 自考本科《小学教师专业发展》第三章小学教师专业发展因素PPT课件.pptx
- 2024年煤气烘炉项目可行性研究报告.docx
- 2024-2030年中国直流滤波电容器行业销售动态与竞争趋势预测报告.docx
- 铁冶金学知识课件.pptx
文档评论(0)