响应式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. 内嵌样式与 ...
随机推荐
- lightoj1001【简单题】
题意: 一个人的值不能超过10: #include<stdio.h> #include<queue> #include<string.h> #include< ...
- HDU5122【水】
题意: 有n个数,然后按照冒泡排序的手段,只能往后移,然后问你最小几轮可以实现1-n 思路: 后边有比他小的数的话就一定要到后面去 求一下有多少个 PS: 如果还可以往前移,那么我们可以求一个最大确定 ...
- HDOJ1874最短路【spfa】
//不知道切过这道题目几次了,这次又wa了...双向路啊....这波简直无奈了,今晚又是浪成狗!!!! #include<cstdio> #include<vector> #i ...
- WPF Set connectionId threw an exception异常 以及重复dll的问题
1.DataOutputWPF 在显示norlib.Basic.UserConfigControl时 抛出异常 xmlparsingException : WPF Set connectionId t ...
- bzoj 2406: 矩阵【二分+有源汇上下界可行流】
最大值最小,所以考虑二分 |Σaij-Σbij|<=mid,所以Σbij的上下界就是(Σaij-mid,Σaij+mid) 考虑建有上下界网络,连接(s,i,Σaik-mid,Σaik+mid) ...
- SpringBoot2.0 整合 Swagger2 ,构建接口管理界面
一.Swagger2简介 1.Swagger2优点 整合到Spring Boot中,构建强大RESTful API文档.省去接口文档管理工作,修改代码,自动更新,Swagger2也提供了强大的页面测试 ...
- wow.js零基础使用介绍
wow.js依赖于animate.css,首先需要在 head内引入animate.css或者animate.min.css wow.js或者wow.min.js,然后js文件里再写一行代码. 然后在 ...
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- OSPF-1-OSPF的数据库交换(1)
一.OSPF路由器ID(RID) 选举过程: 1.使用router-id id 命令中配置的路由器ID 2.up着的环回接口最大的ip 3.up着的非环回接口最大ip 如果路由器的RID发生了变化 ...
- laravel-admin 自定义导出表单
官方导出文档 laravel-admin自带的导出excel会导出与此模型关联的其他数据.所以参考官方文档调整代码 文章表:id,title,user_id 用户表:id,username //文章模 ...