rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 12px 只需设置html的字体大小为 12/16 及html的字体大小为font-size:75% html { font-size:75%;    <!--  12/16   -->} 我们再来看一下各个浏览器的屏幕宽度 iphone4  320 iphone5  320 iphone6  …

响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化 Bootstrap的基本使用**Bootstrap使用方式1.创建文件夹结构(html.css.js.图片.boorstrap库等)2.创建html骨架3.引入相关样式文件4.书写内容 B…

手机添加O365 邮件账户 一.Android手机添加O365邮件账户 1. 找到手机上“电子邮件” 2. 打开设置 3. 点击添加账户 4. 选择“Exchange” 5. 输入O365的邮箱账户和密码,然后点击下一步 程序会自动检索 Android的手机,一般在这一步无法检索成功,需要后续步骤 6. 再次输入用户名和密码,服务器更改为“outlook.office365.com”,启用安全连接并接受所有SSL证书 点击下一步 7. 点击确定 8. 完成设置 二.IOS手机添加O365邮件账户…

强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. Demo 由于这个项目我设置了最大的宽度限制是640px,最…

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果.基本上在不同分辨率下都是差不多的展示效果,而…

一.rem布局基本原理 原理:rem可以理解为一个长度单位,单位rem的值等于网页font-size的值.如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px. 根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变,我们使用rem做单位的HTML元素的大小也会改变. 比如说:页面中一个div的宽度为2rem,在没有其他任何设置的情况下,他的大小就是32px,这时font-size改变为10px,那么这个div的宽度就会改变为20px. 根据上述…

设置对应的响应式的html rem比例 rem就是根元素(即:html)的字体大小.html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size.甚至,left,top等)你都可以放心大胆的用rem作单位. 我们平常在使用长度单位都会使用px,但是在做上面的响应式的时候,需要用rem或者百分比的单位,大家可以看我的Demo代码.在上篇文章介绍了rem的字体设置计算方法: html{ font-size:62.5%; /* 10÷16=…

https://cloud.tencent.com/developer/article/1117009 一:为什么要用MVVM? 为什么要用MVVM?只是因为它不会让我时常懵逼. 每次做完项目过后,都会被自己庞大的ViewController代码吓坏,不管是什么网络请求.networking data process.跳转交互逻辑统统往ViewController里面塞,就算是自己写的代码,也不敢直视.我不得不思考是不是MVC模式太过落后了,毕竟它叫做Massive View Controlle…

个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知…

1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw单位来完成响应式开发 (2)rem介绍 rem是相对长度单位.相对于根元素(即html元素)font-size计算值的倍数,比如你html设置的字体为20px,那么页面中的1rem就相当于20px,举个…

一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem和em:https://blog.csdn.net/u010132177/article/details/103725945 参考:https://www.jianshu.com/p/58a061c6e9af 1.1安装less依赖 cnpm install less less-loader --s…

流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样 不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法:  320/10  已知的一个比例  =  已知的宽/x    x就是想得到的值: 弹性/流式,布局比较容易,但是里面的内容显示的比例,在不同设备下会有偏差: rem布局:可以保证布局是等比列缩放: rem:是单位,有根节点的字体大小决定,html:就是根节点 案例:html{font-size:100px} 那么在此页面中1rem=100px 案例:bo…

前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 同样的,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢? 当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息…

前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下. rem是指:根元素(root element,html)的字体大小, em是指:父元素的字体大小. 下面看一个例子: div{ font-size: 30px; } div span{ font-size: 2em; } <div> div下的元素 <span>span里的元素</span> </div> 在chrome中显示: 也就是说,span里…

上面回顾: 在序言中我们已经提到了响应式的一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 序言中同样提到,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢? 当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺…

1.angular 调用客户端方法放在 try catch中 try { js_invoke.showShareDialog(angular.toJson(obj));  // 在这里放客户端的方法即可 } catch(e) { console.log('Recommend share',obj); } 2.客户端调用angular的方法,注意方法需全局可以才能正常调用 在首页index.html中声明方法 var goBack = function() { return false }; 在具…

一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点.一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080.(这里的1像素指的是物理设备的1个像素点) 屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi.屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,…

安卓手机与iOS手机的区别 1.操作系统不同  安卓手机都是安卓操作系统:IOS手机都是iOS操作系统. 目前安卓最新的系统是Android 8.1:iOS版本最新的是iOS 11. 2.操作方式不同 1)操作按钮 安卓机最下面一般都是3个键,分别为:中间home键,一个返回键,一个任务键: iOS手机只有中间home键 2)操作习惯 a)返回习惯 安卓手机打开app后点击进入其他页面,可以按返回键进行返回到上个页面或者按app软件内的 返回按钮可以回到上个页面:iOS只能通过软件内部的返回键返…

1.JS复制原理: 被复制内容的元素不能被其他元素遮盖,否则无效.  (设置opacity透明为0,不可以设置display:none); 2.常规的复制方法 function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择需要复制内容的对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,…

对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念. rem是相对于根元素<html> 在我的项目中就是用这样的一段js代码. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, user-scalable=no&…

在做quhao APP架构时,后台Server端使用了Java,提供WebService,而iOS和Android作为移动客户端.在做数据交互时,Server端返回JSON格式数据.由于iOS SDK中提供的JSON数据解析实在太过麻烦,这里讲下iOS下如何使用SBJson库来解析JSON格式数据. 首先我发起了一个HTTP请求,得到一个response字符串,此字符串是JSON格式: NSURL *url = [NSURL URLWithString:@"http://192.168.1.2:…

转:  http://ios.jobbole.com/85041/ 移动端数据库新王者:realm 2016/05/14 · iOS开发 · 数据库 分享到:0 原文出处: 没故事的卓同学(@没故事的卓同学)    realm 介绍 realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective‑C和Swift)以及Android.2014年7月发布.由YCombinator孵化的创业团队历时几年打造,是第一个专门针对移动平台设计的数据库.目标是取代SQLite.为了彻底解决性能…

参考网址1: iOS消息推送机制的实现 http://www.cnblogs.com/qq78292959/archive/2012/07/16/2593651.html 参考网址2: iOS 推送的服务端实现 http://www.dozer.cc/2013/03/push-notifications-server-side-implement/ 参考网址3: iOS 证书与推送证书的注意事项 http://www.dozer.cc/2013/06/ios-certificates-and-p…

#region 跨平台加解密(c# 安卓 IOS) // public static string sKey = "12345678"; // /// // /// 解密 // /// // /// 要解密的以Base64 // /// 密钥,且必须为8位 // /// 已解密的字符串 // public static string DesDecrypt(string pToDecrypt) // { // //转义特殊字符 // pToDecrypt = pToDecrypt.Rep…

看起来不错的一套一元云购CMS源码,源码包里面带了安卓和ios手机客户端,手机客户端需要自己反编译.    这里不做功能和其它更多的介绍,可以自己下载后慢慢测试了解.    下面演示图为亲测截图<ignore_js_op> <ignore_js_op> <ignore_js_op> 源码安装说明:服务器空间需要支持PHP + MySQL1.源码完整上传至服务器空间2.通过phpmyadmin将根目录下面的sql数据库导入到你自己的MySQL数据库里面,不会导数据库的童鞋…

原文转自:http://www.zccode.com/thread-724-1-1.html 该资源说明: 看起来不错的一套一元云购CMS源码,源码包里面带了安卓和ios手机客户端,手机客户端需要自己反编译. 这里不做功能和其它更多的介绍,可以自己下载后慢慢测试了解. 安装说明: 服务器空间需要支持PHP + MySQL1.源码完整上传至服务器空间2.通过phpmyadmin将根目录下面的sql数据库导入到你自己的MySQL数据库里面,不会导数据库的童鞋请参考: phpmyadmin导入sql数…

视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"…

响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐藏元素 添加meta viewport 明白手机端交互方式的区别 Media Query 是什么 Media query 翻译过来就是媒介查询,媒介就是我们查看这个网页的设备. 媒介查询源于CSS3,它可以根据用户的设备所具有的某些特征,来提供不同的样式用于显示. 用法 引用方式 它的引用方式一共有…

媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px){ /* CSS 代码 */ } 一般这么写,指的是webview的宽度,同样的,根据clientWidth 设置根节点是fontsize 也是参考的webview的宽度. 如果放在pc上或者是手机默认全屏H5里面,这么写是没有问题的. 但是混合开发,将H5页面嵌套在app的webview里面,这么…

移动端网页书写   css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px;font-size: calc(100vw/7.2);//根据设计稿设置自己的宽度,对应比例/*设计稿为720px宽度*/} 在网页的头部书写以下内容: <meta name="viewport" content="initial-scale=1.0,width=devic…