【响应式Web前端设计】Viewport解析
文章目录
- 1 什么是 Viewport?
- 2 设置 Viewport
1 什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
2 设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
以下实例演示了使用viewport和没使用viewport在移动端上的效果:
实例1、没有添加 viewport:点击查看
实例2、添加 viewport:点击查看
【响应式Web前端设计】Viewport解析相关推荐
- 【响应式Web前端设计】一文学会使用Bootstrap!
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具 请先学习该文 ...
- 【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间 桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
- 【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
- 【响应式Web前端设计】Bootstrap入门Demo(导航栏)
文章目录 1 导入bootstrap.min.css 2 效果 3 代码 1 导入bootstrap.min.css 2 效果 3 代码 <!--作者:88304454@qq.com时间:202 ...
- 【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
- 【响应式Web前端设计】css如何设置边框的圆角样式?border-radius属性设置圆角样式(图 文)
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
- 【响应式Web前端设计】css中:overflow:hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
- 【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
最新文章
- python【力扣LeetCode算法题库】994-腐烂的橘子(BFS)
- boost::geometry::detail::overlay::approximately_equals用法的测试程序)
- php_mvc实现步骤五
- 【杭电多校2020】Fibonacci Sum【斐波拉契通项】【推式子】
- [Ajax] jQuery中的Ajax -- 03-搜索框提示效果
- 函数式编程中的两个棘手问题
- C中处理Python的Numpy数组的代码范例
- 【软件应用】数学公式插件TeXsword应用教程
- ddr3ddr4 lpddr4速率_Ddr2,ddr3,ddr4内存条的读写速率
- UnityEditor三自定义窗口 案例2
- hdu 2167 Pebbles 状态压缩dp
- 平板为何无法用无线网连接媒体服务器,我家装了无线路由器后,台式机老是断网但是平板电脑却能连接无线网络上网...
- 软件设计师-计算机网络(刷题笔记)
- Could not enlist in transaction on entering meta-aware object!”
- java gef_GefExample GEF的例子,用于eclipse 学习,非常好的源码材料。 Java Develop 238万源代码下载- www.pudn.com...
- 数据库中锁机制的学习
- 响应式布局以及提交网站
- Caffe和caffe2漫谈
- 游戏脚本在移动游戏设计中的作用_展示 | 游戏脚本编程在线教学设计案例
- jdk的安装和环境变量的配置