文档章节

响应式开发(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;}

© 著作权归作者所有

上一篇: 响应式开发(2)
下一篇: ajax异步处理
sunnyGirl
粉丝 0
博文 9
码字总数 3863
作品 0
武汉
私信 提问
移动web开发———第三天

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

我是小谷粒
2018/02/05
0
0
响应式方案调研及前端开发管理思考

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

浩瀚动酷
2018/06/27
0
0
(11)照虎画猫深入理解响应式流规范——响应式Spring的道法术器

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

享学IT
2018/06/26
0
0
B2B2C电商系统前端页面开发

项目简介: B2B2C电商系统前端页面开发 将提供的开发资料: 1.部分前端页面设计稿 2.完整目录结构及文件命名 3.Routes 列表及对应 Scenes 名称 4.完整的Restful API结构字段说明 5.Mock 场景...

优仁
2017/03/23
17
0
前端响应式布局原理与方案(详细版)

引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是比较重。下面是博客网站对不同...

八叉树
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
30分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
32分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
35分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
40分钟前
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部