React Native - 组件

概述组件样式在React Native中,仍然使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法。 style属性可以是一个普通的JavaScript对象。还可以传入一个数组 —- 在数组中位置居后的样式对象比居前的优先级更高,这样可以间接实现样式的继承。 实际开发中组件的样式会越来越复杂,建议使用StyleSheet.create来集中定义组件的样式。 ...     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 13, 2017

React Native - 环境搭建

环境搭建基本步骤 下载安装python2.x 下载安装node 下载安装Android Studio 环境变量配置 安装react-native 创建项目 模拟机调试项目 真机调试 常见问题     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 13, 2017

Web开发工具和插件

插件html5shivhtml5shiv能够使不支持HTML5新元素的低版本的IE浏览器识别HTML5标签以及应用样式。 IE9以上的版本是支持HTML5,对于IE9之前的版本,在head中加入如下代码: <!--[if lt IE 9]> <scri...     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 10, 2017

响应式设计:媒体查询

概述CSS3引入的媒体查询,允许针对一个特定范围的输出设备定制内容的呈现,而不必改变内容本身。一个媒体查询由一个可选的媒体类型和零个或多个限制样式表应用范围的表达式组成。这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true。当媒体查询为true时,其对应的样式表或样式规则就会遵循正常的级联规则进行应用。 使用方法     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 10, 2017

移动端适配:像素与视口

相关概念设备像素/硬件像素/物理像素设备像素,也称为硬件像素、物理像素,是显示屏上能够显示颜色的最小的单位,由一组物理灯(每组包括红、绿、蓝三种颜色的灯)构成,通过在不同光强下打开或关闭这些灯,可以产生任意数量的颜色和亮度。 设备的物理像素数是固定的,是厂商在出厂时就设置好了的 —— 即一个设备的(物理)分辨率是固定的。比如iPhone5的(物理)分辨率为640x1136,则设备像素数为640x1136。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 09, 2017

像素是什么

本文根据 Lukas 的 What’s a Pixel? 翻译,无法保证译文完全正确。 问题Appway的很多屏幕组件都要求输入像素值。例如,自适应流布局具有这样的属性。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 07, 2017

理解像素和其他CSS单位

本文根据 Vincent Hardy, Sylvain Galineau 的 Understanding pixels and other CSS units 翻译,无法保证译文完全正确。 摘要本指南介绍CSS像素和其他单位之间的关系,以及CSS和设备像素之间的关系。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 06, 2017

响应式设计工作原理

本文根据 Gustav Jorlöv 的 What makes responsive design work 翻译,无法保证译文完全正确。 在这篇简短的介绍中,我想让你了解一下使响应式web设计成为可能的机制。我不是要深究一些不必要的细节,而是在web开发人员能受益的程度下解释概念。我还想提一下,不同浏览器行为不同,特别是在Android的自由领域里,但是这篇短文不会涉及如何处理浏览器兼容性问题,因为那本身是一个完整的故事。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 02, 2017

理解视口

本文根据 Earle Castledine, Myles Eftos, and Max Wheeler 的 Understanding the Viewport 翻译,无法保证译文完全正确。 移动开发时,必须了解视口。在桌面端,视口是一个清晰的概念:它是浏览器窗口中的可视区域。在移动设备上则比较复杂,因为屏幕通常比浏览器窗口小。 在     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 02, 2017

虚拟视口

本文根据 Matt Gaunt 的 What the Virtual Viewport? 翻译,无法保证译文完全正确。 Chrome M40对viewport做了一个非常微妙的更改,但对用户来说应该有很大的不同。 移动浏览器启动时,缺少viewport元标签意味着浏览器会让网页认为它有大约980px的屏幕空间,并以这个大小呈现。如果使用viewport元标签,则开发人员可以定义宽度,通常定义为device-width设备宽度,这会将屏幕大小设置为设备大小。可以在     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 01, 2017