文档章节

响应式开发(1)

sunnyGirl
 sunnyGirl
发布于 2016/11/29 09:39
字数 218
阅读 6
收藏 0
点赞 0
评论 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
武汉
移动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
响应式方案调研及前端开发管理思考

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

浩瀚动酷
06/27
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
十分钟了解响应式编程

响应式编程是一种编程模式,关注数据流,对数据的改变做出响应和分发。响应式编程模式中,激励元素是输送进来的可能无边界的数据,称为数据流(Stream)。 符合响应式编程的一个流行的模型是“...

LeonalGU
2017/11/09
0
0
深入浅出-iOS函数式编程的实现 && 响应式编程概念

原文出处: Yangcs(Yangcs) 简介 本篇主要回顾一下--iOS函数式编程 && 响应式编程概念 ,如何一步步实现函数式编程的过程,对阅读源码有一定的帮助。 配图 作为一个iOS 开发者,那么你一定...

刘星石
2016/03/07
11
0
微服务和响应式系统

微服务是一组隔离的单一职责的服务,服务作为独立个体可以自由激活或关闭(弹性可回复),可以自由分布(伸缩可扩展)。微服务之间通过异步分界来解耦合,这样,在时间层面的并行和空间层面的分布...

LeonalGU
2017/11/08
0
0
【原创】响应式网页设计基础【从零开始】

响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率,降低维护成本,提升用户体验等突出优势更是为Web 2.0时代掀起了又一...

Mr.Zheng
2013/07/05
0
6
10 个新的很有用的开发框架

在这篇文章中我们将向你介绍 10 个很有用的新框架,这几个框架你可能之前没见过,那么现在不妨了解一下,或许对你的开发工作会有很大帮助。 1. Web Tracing Framework Web Tracing Framework...

oschina
2013/08/15
16K
16

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python爬取站长素材网页图片保存到ppt中

网站地址:http://sc.chinaz.com/tupian/index.html 直接上代码: import requestsfrom bs4 import BeautifulSoupfrom pptx import Presentationfrom pptx.util import Inchesimpor......

你为什么不吃药
13分钟前
1
0
Ubuntu 18.04 swap空间的修改

一、准备工作 执行“sudo swapon -s”命令,查看是否已经存在swap file 二、修改swap file # 如果第一步存在swapfile则需要先禁用sudo swapoff /swapfile# 修改swap 空间的大小为2Gs...

Iceberg_XTY
16分钟前
1
0
438. Find All Anagrams in a String - LeetCode

Question 438. Find All Anagrams in a String Solution 题目大意:给两个字符串,s和p,求p在s中出现的位置,p串中的字符无序,ab=ba 思路:起初想的是求p的全排列,保存到set中,遍历s,如...

yysue
22分钟前
0
0
RabbitMQ实战:五种模式和案例

本文来自:Rabbitmq的五种模式和案例 消息生产者p将消息放入队列 消费者监听队列,如果队列中有消息,就消费掉,消息被拿走后,自动从队列删除 (隐患,消息可能没有被消费者正确处理,已经消失了,...

spinachgit
23分钟前
0
0
android基于MVP小说网络爬虫、宝贝社区APP、仿虎扑钉钉应用、滑动阴影效果等源码

Android精选源码 android宝贝社区app源码 android仿Tinder最漂亮的一个滑动效果 android仿滴滴打车开具页,ListView粘性Header Android基于MVP模式开发的小说网络书库带缓存网络爬虫,。 Easy...

逆鳞龙
25分钟前
0
0
第三章 spring-bean之beanFactory系列(1)

前言 spring的基本问题,每次面试基本会问题。比如 - spring是什么回答是ioc,aop,第三个就是beanfactory。 - spring使用什么模式,100%的人回答是工厂模式。 - 这面的问题大家都知道。关于...

鸟菜啊
28分钟前
0
0
箭头函数

var foo = v => v;// 等同于var foo = function (v) {return v;} 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分 var f = () => 5;// 等同于var f = functio...

litCabbage
29分钟前
0
0
软件入门的知识之程序设计语言Java和C#的简单介绍和对比[图]

软件入门的知识之程序设计语言Java和C#的简单介绍和对比[图]: 前言: 要做软件就必然会涉及到程序设计语言,它是什么?有哪些特点?又有哪几部分组成的呢?在这里我们为大家做了一个总结,希...

原创小博客
29分钟前
0
0
重写视频播放进度条

需要注意的地方,基于html vedio 标准使用期去了解一下 1.想去掉视频默认的播放条,去掉controls属性。 2.需要预加载视频加上preload="auto"属性。 1.js代码 $(function(){ init(); }); var ...

轻量级赤影
37分钟前
0
0
saltstack管理任务计划-添加&删除

1.服务端配置 >>编辑 top.sls 文件 # vim /srv/salt/top.sls //修改为如下 base: '192.168.*.*': - crontest >>编辑crontest.sls文件添加计划任务 cron-test: cron.present: - name: /bin/to......

硅谷课堂
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部