网页设计-Viewport
网页 设计 viewport
2023-06-13 09:17:47 时间
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代码生成器,支持网页快速排版 CSS代码一键生成的在线设计工具
- mac网页设计工具Bootstrap Studio Macv6.1.3
- 网页设计入门教程_网页设计课程
- 通过HTML和CSS设计一个静态网页(练习实例,附完整代码)
- web前端设计与开发期末作品: 服装主题网页设计——女装下拉菜单带特效 (11页) HTML+CSS+JavaScript 网页设计期末作业个人主页…[通俗易懂]
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
- 网页播放rtsp视频流
- 常见的网页设计布局有哪些?优秀的网页设计都有的8个特点
- 「 个人网页设计记录-404-not-found篇-菜鸡记录 」
- (一)传统网页开发弊端
- 网页设计有什么标准?细说网页设计的6大规范
- Dreamweaver2020高效的网页设计工具,更快速、更灵活地创作网站
- 如何妥善的设置网页的字体
- 爬虫第二课:解析网页中的元素详解编程语言
- 设计MySQL数据库指导网页设计(mysql数据库网页)
- Linux下的Elinks:快速网页浏览的好工具(linuxelinks)
- Linux下网页设计的创新之旅(linux网页设计)
- 访问Oracle网页访问:实现无拘无束的信息共享(oracleweb页面)
- 设计更快的网页(三):字体和 CSS 调整
- 如何在网页中显示 MySQL 数据?(mysql网页显示)
- 用Asp如何实现防止网页频繁刷新?
- 网页设计常用的一些技巧
- CSS关于网页图片的属性
- JavaScript全面解析各种浏览器网页中的JS执行顺序
- 使用JavaScript让网页的title动起来
- 网页编辑器ckeditor和ckfinder配置步骤分享
- 幻灯片带网页设计中的20个奇妙应用示例小结
- JSCodeallofBrower全局屏蔽网页右键功能具体实现
- 一个JS函数搞定网页标题(title)闪动效果