viewport

zepto中的动画+Ajax+touch模块+zepto插件

蹲街弑〆低调 提交于 2020-03-18 23:02:57
zepto中的动画 zepto中不具备动画模块,需要单独引入 fx.js 和 fx_methods.js https://github.com/madrobby/zepto toggle 元素显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zepto</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> </style> </head> <body> <div>box</div> <button id="btn">点我</button> <script src="js/zepto.min.js"></script> <script src="js/fx.js"></script><!-- 动画模块 --> <script src="js/fx_methods.js"></script> <script> $("#btn").click(function(){ $("div").toggle(); $("div").toggle("slow"); $("div").toggle(3000); }) </script> </body> <

移动端适配方案总结(二)

左心房为你撑大大i 提交于 2020-03-17 01:25:20
拉钩webapp    1. 设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   2. 设置 html { font-size: 65.5% ;}(10.48px = 16px*65.5% = 1rem )   3 .顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变, 每个列表的高度也不变   4. 设置文本字体 例如 16px时 { font-size: 1.6rem;} 淘宝webapp (1)动态设置viewport的scale   var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]')   .setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); (2)动态计算html的font-size   document.documentElement

从网易与淘宝的font-size思考前端设计稿与工作流

假如想象 提交于 2020-03-17 01:24:40
互联网上的 自适应 方案到底有几种呢?就我个人实践所知,有这么几种方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用 rem 实现一稿解决所有设置自适应。在没出来这种方案之前,第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。 以下摘自: 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些 web app并一定很复杂,比如拉勾网,你看看它的页面在iphone4,iphone6,ipad下的样子就知道了: 它的页面有一个特点,就是: 顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边 这种app是一种典型的弹性布局:关键元素高宽和位置都不变,只有容器元素在做伸缩变换。对于这类app,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放。以图描述: 这个规则是一套基本的适配规则,对于这种简单app来说已经足够,同时它也是后面要说的 rem 布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说,因为现在很多设计稿是根据iphone6的尺寸来的

从网易与淘宝的font-size思考前端设计稿与工作流

偶尔善良 提交于 2020-03-17 01:24:08
转自: http://www.cnblogs.com/lyzg/ 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:)。 1. 问题的引出 最近阅读白树的博文《 移动web资源整理 》时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media

h5 移动端适配方案思考

北战南征 提交于 2020-03-15 12:31:19
基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容。平时经常写的width:100px;height:100px;都是与设备无关的。 设备独立像素(device independent pixels),也可以称为设备无关的逻辑像素 meta里面设置width=device-width,这个device-width就是设备独立像素 在chrome里 看到的ip6为375 667,ip4为320 480等等都是设备独立像素, 它们在数值上与css数值是相等的 。 设备像素(device pixels ),也可以称为物理像素 是显示屏的最小物理单位 ,每一像素都包含自己的颜色、亮度。像素是没有大小的、是一个抽象概念、是一个相对单位。 关于像素有一个常见的错误理解:认为像素是一个宽高相等的小方块,并且的像素都是“那么大”,但是不知道这个宽高的具体数字。 分辨率 泛指量测或显示系统对细节的分辨能力。以ip6手机屏幕为例,分辨率为750×1334,这是指屏幕纵向能显示1920个像素,横向能显示1080个像素 设备像素比,也成dpr 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到: 设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向 适配方案1-固定viewport 好处

移动端常见bug

不问归期 提交于 2020-03-13 09:13:26
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

生来就可爱ヽ(ⅴ<●) 提交于 2020-03-12 22:18:40
SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性: viewport , viewBox , 和 preserveAspectRatio 。 这是本系列三篇文章中的第一篇,这篇文章讨论SVG中的坐标系和变换。 理解SVG坐标系和变换(第一部分)-viewport, viewBox ,和 preserveAspectRatio 理解SVG坐标系和变换(第二部分)- transform 属性 理解SVG坐标系和变换(第三部分)-建立新视窗 为了使文中的内容和解释更形象化,我创建了一个互动演示,你可以任意改变 viewBox 和 preserveAspectRatio 的值。 在线案例 这个例子只是主要内容的一小部分,所以看完请回来继续阅读这篇文章 SVG画布 canvas 是绘制SVG内容的一块空间或区域。理论上,画布在所有维度上都是无限的。所以SVG可以是任意尺寸。然而,SVG通过 有限区域 展现在屏幕上,这个区域叫做 viewport 。SVG中超出视窗边界的区域会被裁切并且隐藏。 视窗 视窗是一块SVG可见的区域。你可以把视窗当做一个窗户,透过这个窗户可以看到特定的景象,景象也许完整

Bootstrap 基础讲解2

核能气质少年 提交于 2020-03-11 16:15:31
-------------------------------------------思想是行动的先导,心理问题直接作用并影响人的思想。 知识预览 bootstrap简介 CSS栅格系统 四 表格 表单 回到顶部 bootstrap简介 http://v3.bootcss.com/ Bootstrap优点: 下载: Bootstrap引入 1 2 3 4 < meta name="viewport" content="width=device-width, initial-scale=1"> < link href="dist/css/bootstrap.min.css" rel="stylesheet"> < script type="application/javascript" src="dist/jquery-3.1.1.js"></ script > < script type="application/javascript" src="dist/js/bootstrap.min.js"> 回到顶部 CSS栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

CSS的水平居中和垂直居中方式

眉间皱痕 提交于 2020-03-08 22:02:28
水平居中 1.行内元素或行内块元素水平居中,即给其父元素添加text-align:center 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .wrapper { 15 height: 400px; 16 background-color: pink; 17 text-align: center; 18 } 19 </style> 20 </head> 21 22 <body> 23 24 <div class="wrapper"> 25 <span class="center">text-align:center</span> 26 </div> 27 28 </body> 29 30 </html> 2.块级元素水平居中可以用margin:0 auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta

ajax

社会主义新天地 提交于 2020-03-07 19:13:00
**今天,我就带你来了解一下ajax吧!** 首先我们得明白什么是ajax?那到底什么才是ajax呢? AJAX = “Asynchronous Javascript And XML”(==异步 JavaScript 和 XML==) 直译出来就是异步的 JavaScript和数据传输技术 。国内常翻译为**==“ 阿贾克斯 ”==**是指一种无需重新加载整个网页的情况下,能够更新部分网页的技术。直白的说,ajax就是js通过一个网址去加载数据。用户是看不见的,可以通过浏览器控制台中的网络查看。 上面说到,xml,我们就结合json来给你介绍~~~ ==xml(可扩展标记语言)、json(轻量级数据格式)都是字符串的格式,都用于数据传输== 两者之间有什么区别呢? **xml:** 优点: 1、传输的数据种类特别丰富 2、传输的数据量非常大 缺点: 解析起来比较麻烦 【注】用于大型门户网站,今日头条、腾讯新闻、网易新闻。 **json:** 优点: 1、解析起来非常方便 2、适合轻量级的数据 缺点: 1、种类比较少 【注】基本上90%以上应用用的都是json格式字符串传输。 同时说到异步,有的小伙伴就懵逼了,心想异步是啥,有什么作用呢? 了解异步之前,我们首先看看javas中的同步是什么吧! ==同步== : 阻塞,当前程序必须等前面的程序执行完毕以后,才能运行 。 举个例子