文档章节

响应式开发(1)

sunnyGirl
 sunnyGirl
发布于 2016/11/29 09:39
字数 218
阅读 6
收藏 0

viewport在响应式开发中表示的是可视端口

<meta name="viewport" content="name=value, name=value">

width 设置viewport的特定值(device-width)设置需要操作的设备的宽度width=device-width

initial-scale 设置页面的初始缩放

minimum-scale 最小缩放

maximum-scale 最大缩放

user-scalable 用户能否缩放,一般的设置值是no

布局的viewport可以通过控制台,用document.body.clientWidth来进行获取

度量的viewport可以在控制台,通过window.innerWidth来进行获取

如果设置初始比例为1,也就是通过initial-scale=1,那么布局的viewport和度量的viewport的值是一样的

使得布局viewport=布局viewport=设备的宽度

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

flexbox弹性盒模型,flex表示所占的比例,语法结构flex:1

display:-webkit-flex;

.parent{justify-content:center; //水平居中 align-items:center;//垂直居中 display:-webkit-flex;}

© 著作权归作者所有

共有 人打赏支持
sunnyGirl
粉丝 0
博文 9
码字总数 3863
作品 0
武汉
响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index20171200...

浩瀚动酷
06/27
0
0
移动web开发———第三天

一、响应式开发 1、响应式布局, 就是一个网站能够兼容多个终端。 2、响应式开发的原理 CSS3中的Media Query(媒介查询,and之后一定要加空格@media screen and (min-width: 768px) and (max...

我是小谷粒
02/05
0
0
详解前端响应式布局、响应式图片,与自制栅格系统

响应式布局简介 什么是响应式?同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就好了,缺点是CSS比较重。 如下图...

白小明
2017/11/24
0
0
(11)照虎画猫深入理解响应式流规范——响应式Spring的道法术器

本系列文章索引《响应式Spring的道法术器》 前情提要 响应式流 | Reactor 3快速上手 本文源码 2 响应式编程之法 上一章在响应式编程库方面,本着“快速上手”的原则,介绍了响应式流的概念,...

享学IT
06/26
0
0
bootstrap和angular.js技术要求

1、热爱前端,熟练运用JavaScript、HTML5、CSS3等技术,会使用html+div方式实现整体页面风格. 2、具备单页面应用开发经验,特别是AngularJS框架框架使用经验. 3、熟练使用JQuery,bootstrap,...

zhantu
2016/03/24
29
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
7分钟前
0
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
39分钟前
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
47分钟前
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部