响应式Web设计- Viewport
什么是Viewport?
viewport是用户网页的可视区域, 翻译为中文可以叫做"视区"。
设置Viewport
一个常用的针对移动网页优化过的页面的Viewport meta设置如下:
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
width:控制Viewport大小,可以指定的一个值,例如:600或一个特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:与width相对应,指定高度。
initial-scale:初始缩放比例,也就是页面第一次load时缩放比例。
maximum-scale:允许用户缩放到最大的比例。
minimum-scale:允许用户缩放到最小的比例。
user-scalable:用户是否可以手动缩放。
响应式Web设计- Viewport的更多相关文章
- 响应式 Web 设计 - Viewport 和手机变框变粗的问题
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name="viewport" content="width=devi ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 初探响应式Web设计
公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
随机推荐
- 请写出JAVA弹栈压栈的步骤, 栈的存储方式
一.栈的作用 1. 栈的存放 局部变量 堆中对象的引用(对象在堆内存中的地址) 一个对象的大小无法估计,但是一个对象的引用只占4byte 基本数据类型的变量没有什么存储区域的说法,内存中分为两 ...
- 如何在普通 UIViewController 中使用 UITableView
本系列文章 <Swift on iOS 学习笔记> 将以不定长度.不定内容.不定形式的方式对外发布,主要记录一些 “可重用” 的知识,感谢你的阅读. 在继承自 UIViewControll ...
- 世风日下的哗啦啦族I (简单分块模板)
题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; #define inf 0x7ffffff ...
- JIRA中的标记语言的语法参考
前言 看到网上有的文章说JIRA是使用Textile这门标记语言,有些语法和Wikitext和Markdown相像.JIRA在2017年进行了一次大更新,某些语法可能和以前不大一样,这里纪录一下常用的 ...
- zookeeper master 选举
原文地址: http://www.cnblogs.com/nevermorewang/p/5611807.html 选主原理介绍:zookeeper的节点有两种类型,持久节点跟临时节点.临时节点有个特 ...
- Zynq7000开发系列-5(OpenCV开发环境搭建:Ubuntu、Zynq)
操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...
- 1-27TreeSet简介
使用TreeSet存储Integer对象 TreeSet的特点是可以对存放进去的元素进行排序. package com.monkey1024.set; import java.util.TreeSet ...
- JavaScript特点、优缺点及常用框架
参考来源: http://www.cnblogs.com/SanMaoSpace/archive/2013/06/14/3136774.html
- 一个发散动画的菜单控件(主要记录控件x,y坐标的运动状况)
private void showCloseAnim() { int size = viewList.size(); if (size % 2 == 0) { //是偶数 for (int i = 0 ...
- max713镍氢电池充电管理IC
PDF:https://datasheets.maximintegrated.com/en/ds/MAX713SWEVKIT.pdf http://www.ixueshu.com/document/b ...