项目四任务三 制作“名山大川”页面_第1页
项目四任务三 制作“名山大川”页面_第2页
项目四任务三 制作“名山大川”页面_第3页
项目四任务三 制作“名山大川”页面_第4页
项目四任务三 制作“名山大川”页面_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

大美中国制作“名山大川”页面CONTENTS目录响应式概述第一部分像素和屏幕分辨率第二部分视口第三部分CONTENTS目录媒体查询第四部分百分比布局第五部分响应式概述第一部分响应式概述响应式布局是一种网页设计和开发的方法，目标是创建一个能够兼容多个终端的网站，而不是为每个终端创建特定版本的网站。它使得网站能够适应不同设备的屏幕尺寸和分辨率，从而提供最佳的用户体验。这种设计方法通过使用流体网格、弹性图片、媒体查询等技术，确保网页在各种设备上都能正确显示和操作，从手机、平板电脑到桌面电脑，甚至更大的显示屏。响应式概述1.优点灵活性高，易解决多设备显示适应问题有效降低开发和维护成本12响应式概述2.缺点12开发工作量增加，开发效率降低代码累赘，页面加载时间增加改变网站原有的布局结构，用户使用不习惯3响应式概述3.技术原理<meta>标签控制浏览器视口根据屏幕尺寸和设备特性应用不同的CSS样式使用百分比来定义元素的宽度使用相对单位（如em或rem）来设置字体大小视口CSS媒体查询百分比布局可伸缩的字体图片和其他媒体元素能够自动调整大小弹性图片和媒体像素和屏幕分辨率第二部分像素和屏幕分辨率1.像素和屏幕分辨率像素是显示设备上最小的物理点，可以被单独控制以产生光。它是构成图像的最小单位。像素可以是单个颜色，也可以是子像素。我们打开ps，将图片放到最大，那些一个个模糊的小方格就是像素。像素和屏幕分辨率1.像素和屏幕分辨率屏幕分辨率是指屏幕上可以显示的像素数量，通常以水平像素数乘以垂直像素数来表示，例如1920x1080。分辨率决定了屏幕能够显示的图像的精细程度。分辨率越高，显示的图像越清晰，能够展示的细节也越多。像素和屏幕分辨率2.设备像素设备像素（DevicePixels）是指显示设备（如显示器、手机屏幕、平板电脑屏幕等）上实际的物理像素点。这些像素点是构成图像、视频和用户界面的基本单元，它们决定了显示设备的分辨率和图像的清晰度。设备像素直接关联到设备的物理分辨率，即屏幕上可以容纳的水平和垂直像素点的数量。例如，一个1920x1080像素的屏幕意味着它有1920个水平像素点和1080个垂直像素点。像素和屏幕分辨率2.设备像素由于不同型号的手机、平板或电脑的实际屏幕尺寸不同，我们使用像素密度PPI（PixelsPerInch，每英寸像素数）来衡量它们的屏幕分辨率，PPI描述了在一英寸长度内可以容纳多少个像素点。PPI越高，屏幕显示的图像越清晰细腻。像素和屏幕分辨率2.设备像素设备设备类型屏幕分辨率移动设备小屏幕手机320*480px中等屏幕手机360*640px大屏幕手机375*667px超大屏幕手机414*736px全面屏手机428*926px平板设备小屏幕平板768*1024px大屏幕平板1024*1366px电脑和显示器标准屏幕1280*800px、1366*768px宽屏显示器1440*900px、1600*900px全高清（FullHD）1920*1080px2K显示器2560*1440px4K显示器3840*2160px表4-3-1常用屏幕分辨率像素和屏幕分辨率3.CSS像素CSS像素指的是在网页设计和开发中使用的虚拟像素或逻辑像素，它们是相对于设备独立像素的概念。CSS像素通常被浏览器映射到屏幕上的物理像素。在标准的显示设备上，1个CSS像素可能正好对应1个物理像素。然而，这个映射可能因设备而异。例如，在高分辨率的显示屏上，一个CSS像素可能对应多个物理像素，以提高图像的清晰度。因此我们使用设备像素比DPR（DevicePixelRatio）来表示CSS像素与物理像素之间的对应关系：一个DPR为1的屏幕意味着1个物理像素对应1个设备独立像素。DPR为2的屏幕意味着1个物理像素对应4个设备独立像素（2x2子像素排列）。视口第三部分视口视口指的是浏览器窗口中用于显示网页内容的区域。在传统的桌面浏览器中，视口通常与浏览器窗口的大小相同。然而，在移动设备上，视口的概念更加复杂，因为它涉及到屏幕的实际大小、设备的分辨率以及浏览器如何渲染网页。视口1.布局视口指的是浏览器用来计算布局的视口。在桌面浏览器中，布局视口通常与浏览器窗口的大小相同。在移动设备上，它可能被设置为一个固定的宽度，如980px，或者与设备的屏幕宽度相同。视口2.视觉视口指的是用户可以看到的网页内容的区域。在移动设备上，视觉视口可以被缩放和滚动，以适应不同屏幕尺寸和分辨率。视口设置是通过在HTML文档的<head>部分添加一个<meta>标签来实现的，语法如下所示：<metaname="viewport"content="width=device-width,initial-scale=1.0">视口2.视觉视口上述代码中<meta>标签用于描述html文档的属性，这里name="viewport"用来进行视口设置，content中是viewport的属性，指的是将视口宽度与屏幕宽度匹配，初始缩放比例为100%。视口2.视觉视口viewport常用属性值介绍如表4-3-2所示。属性值含义width视口的宽度，可以是固定的像素值或设置为device-width，后者意味着视口的宽度将与设备的屏幕宽度相匹配。height视口的高度，通常设置为device-height，与设备的屏幕高度相匹配。initial-scale设置页面的初始缩放比例，通常设置为1.0，意味着页面以100%的比例显示。maximum-scale限制用户能够放大视口的最大比例。minimum-scale限制用户能够缩小视口的最小比例。user-scalable是否允许用户缩放视口，通常设置为yes或no。表4-3-2viewport常用属性值媒体查询第四部分媒体查询媒体查询（MediaQueries）是CSS3的一个功能，它允许网页根据媒体类型和特性（如屏幕宽度、分辨率、设备方向等）应用不同的样式规则。媒体查询是响应式设计中的关键技术，使开发者能够创建适应不同设备和屏幕尺寸的网页布局。以下是媒体查询的一些基本用法和概念：媒体查询的基本语法如下：@mediamedia-typeand(expressions){ /*CSSrules*/}媒体查询这里的media-type指的是媒体类型，如screen、print、speech等。如果不指定，默认为all；expressions指的是媒体特性的条件表达式。媒体查询常用媒体特性如表4-3-3所示。媒体特性说明width设备的可视区域宽度。height设备的可视区域高度。orientation设备的纵横比，可以是portrait（竖屏）或landscape（横屏）。resolution设备的分辨率，如192dpi或2dppx。max-width设备可视区域的最大宽度。min-width设备可视区域的最小宽度。表4-3-3常用媒体特性媒体查询默认情况媒体查询屏幕宽度小于600px屏幕宽度在600px到900px之间媒体查询屏幕宽度在900px到1280px之间设备处于横屏模式且屏幕宽度小于1280px百分比布局第五部分百分比布局百分比布局（FlexibleLayout）是响应式设计中的一种布局技术，它也叫流式布局或者非固定像素布局，就像它的名字一样，它使用百分比（%）而不是固定像素值来定义元素的宽度和高度，这样，元素的宽度可以根据其父容器或视口的宽度变化而自动调整。由于元素宽度是相

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论