本文目录
reactjs适合移动端的web页面开发吗
我认为React是适合移动端，而不适合pc端的。
pc端使用React需要重做很多已有组件，包括但不限于highCharts图表类、dataPicker基础组件。
移动web app恰恰是不需要这类复杂的组件的，这给写移动端项目重写组件带来了机会。
pc端要seo，移动端基本不需要，所以用这种数据后加载的框架有了可能。
然后，用webpack编译出来的基础库React + es6 + Route + redux + tappable，minify之后大概200k不到，gzip之后50k左右。所以明确的说，是适合移动端的。
然
后各位都不使用缓存么？不管是用etag或者Expires的强缓存，还是用localStorage做缓存。第一次访问的50k基础库，都不是2g用户
的致命伤，2g致命伤是一个RTT的时间巨长。用React基本没有操作需要zepto了，少了13k gzip之后的zepto，也少用一个模板引擎。
我承认用了es6之后代码编译会显大，但明显这十几k并不是阻止用React的理由。
大家可以试用一下微信钱包里面的城市服务的首页，刚刚做了React的尝试，基本能做到秒出，以后会推到其它的微信商业项目中。
Js动态设置rem来实现移动端字体的自适应代码
下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应，以此做个记录，方便以后需要，感兴趣的朋友一起看看吧。
具体代码如下所示：
//设置根元素字体
var
win
=
window,
doc
=
document;
function
setFontSize()
{
var
winWidth
=
$(window).width();
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
var
size
=
(winWidth
/
750)
*
100;
doc.documentElement.style.fontSize
=
(size
《
100
?
size
:
100)
+
’px’;
};
//这里我们给个定时器来实现页面加载完毕再进行字体设置
setTimeout(function()
{
//初始化
setFontSize();
},
100);
以上所述是小编给大家介绍的Js动态设置rem来实现移动端字体的自适应代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
怎样低成本的实现网页在移动端的适配
解决方案涉及到的知识点：
viewport
媒体查询(media query)
Javascript window.matchMedia
响应式图片
栅格布局
顶部导航
测试工具
iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media
query技术实现网站的响应性。
viewport
在《head》之中添加viewport元数据标签。
width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。
initial-scale 表示初始缩放。
Js代码
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》
maximum-scale 表示最大缩放比例，1意味着不能进行缩放。
user-scalable=no
禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Js代码
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no“》
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no“》
媒体查询(media
query)
根据不同的分辨率，引用不用的css
Css代码
《link rel=“stylesheet“ type=“text/css“
media=“screen and (max-device-width: 480px)“
href=“shetland.css“ /》
《link rel=“stylesheet“ type=“text/css“
media=“screen and (max-device-width: 480px)“
href=“shetland.css“ /》
Bootstrap3的实现
Js代码
if (window.matchMedia(“(min-width: 400px)“).matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
if (window.matchMedia(“(min-width: 400px)“).matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
状态改变时监听
Js代码
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia(“(min-width: 400px)“);
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
