移动端使用rem字体,注意事项

rem的使用在移动端非常广泛的,但是很多小童鞋,包括我自己在内,有时候使用的方法都是错误的,下面我们一起来讨论下,rem到底该如何使用才能兼容手机端所有手机。

在使用rem之前,我们必须给html设置一个相对的font-size,然后让rem相对于这个字体的大小进行设置。这样才能在手机端正常浏览和使用,只要我们设置了html的font-size,那么我们对于div元素的宽高,我们都可以直接使用rem作为单位使用了。

为了让页面上的所有元素能够兼容所有了浏览器,保证rem的宽高一样。那么我们得给html设置一个font-size的值为625%(切记,移动端一定要设置成625%,PC端可以设置为62.5%)。相关代码如下:

继续阅读移动端使用rem字体,注意事项

移动端flexbox(弹性盒子)布局

flexbox故名思议弹性盒子,一般用于手机设备上的web开发。因为它在手机上有着非常不错的体验度并且还支持目前主流的浏览器,因此它是做移动开发中必学的布局模式。

做前端的都知道div+css布局,也听说过响应式布局、流布局。今天我们要深入css的flex弹性布局,首先我们来看一张关于flex布局的图,此图说明了flex弹性布局的相关属性的使用。

flexbox
flexbox

上图中main axis是主轴,你也可以理解成x轴,cross axis是侧轴,你可以理解为y轴。但是他们与数学中xy轴不同的是,我们可以选择其中一个轴作为主要的轴进行相对的布局。

main start和main end是主轴的起点与结尾,cross start和cross end也就是侧轴的起点与结尾了。

项目(item)默认沿主轴排列。单个项目(item)占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

一、使用flex

flex是使用在父容器中的。使用display来进行设置

display:flex 继续阅读移动端flexbox(弹性盒子)布局

使用VirtualBox搭建安卓虚拟机并配合开发

VirtualBox应该很多人都知道也玩过了吧,如果不知道,那你也应该知道VM啊。如果两个你都不知道,那你也太out了。不论你知不知道,那么下面就跟着我以前来搭建一个能够快速启动的安卓模拟器,并且通过相关设置,让adb命令可以控制这个虚拟的安卓系统。

一、准备

1、下载VirtualBox并安装它

2、下载Android-x86系统镜像文件,可以到http://www.android-x86.org/download进行下载,需要什么版本就下载什么版本。如果你被墙了。那么就下载我百度网盘的4.4版本的吧。地址http://pan.baidu.com/s/1nuOsRHJ,密码:po4d

二、VirtualBox设置

1、创建虚拟机

安装过程对于使用过VBox的朋友来说,那是容易得很那。不过我还是得好好唠叨一下。

在VBox上点击“新建”,填写下名称,类型选择linux,版本选择:linux2.6/3.x/4.x(32-bit),然后点击下一步,下一步,直到完成。如图: 继续阅读使用VirtualBox搭建安卓虚拟机并配合开发

[转]Javascript多浏览器兼容性问题及解决方案

1、document.formName.item(”itemName”) 问题

问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下,只能使用document.formName.elements[“elementName”]。
解决方法:统一使用document.formName.elements[“elementName”]。

2、集合类对象问题

问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。

3、自定义属性问题

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。
<!–more–>
4、eval(”idName”)问题 继续阅读[转]Javascript多浏览器兼容性问题及解决方案

跟我一起学习React(二):props

react中的props传递,如何从父组件传到子组件,从而改变子组件的相关内容和显示信息。继续从我们第一节课开始进行对props的相关设置。
为了演示props的使用方法,这里我们先在index.js添加一段模拟json数据。代码如下:

//定义相关data数据
const contents = [
  {
    'ititle':'标题1',
    'icontent':'这里是标题1的内容'
  },
  {
    'ititle':'标题2',
    'icontent':'这里是标题2的内容'
  }
]

这段代码就是定义一个常量名为contens,他的内容就是一个json字符串。有了数据,那么我们想要将这段数据传递到其他组件去,那就很简单了,对就是使用props进行传递。
1、index.js代码(代码内有详细注释,我就不再做描述了) 继续阅读跟我一起学习React(二):props

跟我一起学习React(一)

React如今已经非常流行了,不论你去哪里进行面试web前端开发,面试官都会问你会不会react、vue、angularjs之类的。搞得好像作为一个前端开发者,必会的东西就是jQuery、react、vue、angularjs、CSS3、HTML5、nodejs等等技术。工作的需要,自己没有办法不去努力学习。因此,下面我们就一起来学习下react吧,如果你还不知道如何在nodejs下配置react开发环境,那么请看我这篇文章《ReactJS环境搭建
本系列课程都是使用ES6进行开发,因此你需要了解相应的ES6基本知识

一、安装React Developer Tools

建议大家都使用chrome浏览器进行安装,下载地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi,如果打不开的童鞋,请自行翻墙(更改hosts,或者使用goproxy)。

React Developer Tools
React Developer Tools

二、创建一个react组件

继续阅读跟我一起学习React(一)

ReactJS环境搭建

在学习ReactJS过程中,由于自己对nodejs了解的不多,因此我打算就直接使用yeoman来实现react的开发环境的搭建了。搭建方法如下:
当然首先你必须安装了nodejs
1、直接输入命令安装

npm install -g yo
npm install -g generator-react-webpack

注意:generator-react-webpack,在yeoman官方的名称是不带“generator-”前缀的,因此,你想要安装官方的任何相关环境,必须在前面加上这个前缀。
这里我只需要react-webpack即可 继续阅读ReactJS环境搭建

使用VUE2制作音乐播放器

研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多,如果没有显示出来,请再等等

vue-player播放器
vue-player播放器

看到了吧,自己的一点小创意,搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的(仅为了演示),如果你是在本地搭建环境,json也可以写在本地。 继续阅读使用VUE2制作音乐播放器