网页设计-Viewport
网页 设计 viewport
2023-06-13 09:16:01 时间
viewport 指代用户网页的可视区域。
没有平板和手机之以及一系列不同屏幕分辨率之前,网页设计的主要目的是用于电脑屏幕上进行展示,常常拥有静态的固定大小。
随着不同电子设备的普及,网页的展示也不仅仅限于固定的显示器屏幕,能适应多种设备展示成为一个很重要的需求。
为了解决这个问题,一个在HTML5中一个meta名称为viewport标签出现了。
设置 ViewportHTML5 引入了一种方法,使 Web 设计者可以通过 meta 标签来控制视窗。
您应该在所有网页中包含以下 meta 元素:
meta name= viewport content= width=device-width, initial-scale=1.0width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放。
下面两个示例展示了使用 viewport 和没使用 viewport 在移动端上的展示效果:
没有视口元标记
带有视口元标记
把内容调整到视口的大小
用户习惯在台式机和移动设备上垂直滚动网站,而不是水平滚动!
因此,如果迫使用户水平滚动或缩小以查看整个网页,则会导致不佳的用户体验。
还需要遵循的一些附加规则:
1. 请勿使用较大的固定宽度元素 例如,如果图像的宽度大于视口的宽度,则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。
2. 不要让内容依赖于特定的视口宽度来呈现好的效果 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大,因此内容不应依赖于特定的视口宽度来呈现良好的效果。
3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值,例如 width: 100%。另外,要小心使用较大的绝对定位值,这可能会导致元素滑落到小型设备的视口之外。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59554.html
手机相关文章
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
- 在线html代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具
- 准备创建独立站?2022年最新制作企业官网必看的网页设计全攻略
- macbook重设密码服务器错误_网页显示500错误
- 用python爬虫爬取网页信息_爬虫python
- 移动端网页设计_redis client命令
- 网页设计需要注意什么?详解网页设计的8大注意事项
- 网页设计如何进行?详解网页设计的8大流程步骤
- 如何高效地进行网页设计
- 网页设计基础知识汇总——超链接
- Linux下网页设计的创新之旅(linux网页设计)
- 谷歌全新设计的手机版与网页版Gmail界面曝光 功能更适合远程办公使用
- 编辑在Linux终端中实现网页编辑(linux终端网页)
- 设计更快的网页(三):字体和 CSS 调整
- 响应式网页设计
- Linux游戏玩家的必读指南:探索最佳网页游戏(linux网页游戏)
- w3m是一个基于文本的网页浏览器,支持多种操作系统,在命令行终端可以很好的支持中文。
- 网页设计-Viewport
- 网页设计 – 媒体查询
- 数据库连接迎来新突破:网页连接MSSQL数据库(网页连接mssql数据库)
- 怎样在网页中连接MSSQL数据库?(网页怎么链接mssql)
- 基于Vue的Redis网页设计(vue设计redis页面)
- 网页设计中色彩搭配的内涵
- 网页设计布局基础