5个大面积响应式设计陷阱及消除方案

2015/09/18 · HTML5,
JavaScript澳门凯旋门注册网址, ·
响应式

原作出处:
王海庆   

1. 引言

原文:Sitepoint的5 Responsive Design
Pitfalls and How to Avoid
Them
译言:希望能够对大家全部帮助。

2. 正文

2.1 引入

设想那样的地方:
您刚刚创制了七个杰出的响应式设计,然后图谋在运动道具中测量检验一下。在你想获得的地点时有发生了一部分难题,文字乱糟糟的,动画波澜壮阔,表单未有显示您设计的样式。然后开支N多时间修复那个难题,您大概抓狂地把Computer扔出窗外砸中邻居家的猫。

好消息是,小编计划在本篇小说里介绍这一个或者令你抓狂的标题,并主讲相应的消除方案。首要不外乎以下三个难点:

  1. 凯旋门074网址,奇怪的文字改动
  2. 非期望的表单样式
  3. 误导的仿真器错误
  4. 桌面端表现可以动画的移位端表现难题
  5. 触摸事件(Touch Event)的坐标明册难题

好的,言归正传。

澳门凯旋门游戏网址,本文若是您领会响应式网页开采的基础知识,不然你只怕供给张开一下调升(眼看教程)。

2.1 意外的文字更改

ios设备的转动将损坏布局、退换页面中的文字大小,当成分(比如导航条、菜单等)设置为定点定位时平日发生类似的标题,只有刷新页面才得以修复难点。幸运的是,有三个主意可以居安思危。

在您的css中增多如下代码

CSS

html { /* 防止横屏时的文字缩放 */ -webkit-text-size-adjust: 100%; }

1
2
3
4
html {
    /* 防止横屏时的文字缩放 */
    -webkit-text-size-adjust: 100%;
}

该代码设置横屏时文字的缩放为百分之百,进而防范意外的文字改换爆发。

2.2 非期望的表单样式

平板或位移道具常常调用暗中同意样式搞糟您的表单样式,我们可以利用如下的css代码阻止表单的默许样式。

CSS

input[type=text], button, select, textarea{ -webkit-appearance: none;
-moz-appearance: none; border-radius: 0px; }

1
2
3
4
5
input[type=text], button, select, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0px;
}

您能够依附必要选用重新载入参数的表单,举例将 input[type=text]5个相近响应式设计陷阱及消除方案。5个相近响应式设计陷阱及消除方案。 更换为 input 会采纳具备类型的input。

2.3 误导的仿真器错误(mulator Errors)

5个相近响应式设计陷阱及消除方案。固然你使用基于浏览器的移位仿真器实行测量检验,一时会时有产生局地讨厌的难题。在你代码没卓殊的图景下抛出三个主题素材,令人纠结。

举例,有贰回正在开拓中的页面底部的导航条岂有此理的消解了,正当本人图谋搜索难点原因时,笔者意识Chrome模拟器的视窗尾部被切掉一部分,当本人在新tab中开采页面,然后切换移动视图刷新之后就缓和了难题。

相遇类似的主题材料,最为重大的是,要保证你的代码没难点无非是模拟器的难题。您能够尝尝隔断难题区域看看代码是不是符合规律办事,然后在真正的移动设备上测验一下。

2.4 桌面端展现优良动画的移位端表现难点

要是您在活动器具上行使动画片,请应当要越发举世瞩目动画的品质难点。一般的话,浏览器可以行得通的动画以下属性translate、scale、rotate和 opacity等,比如下边包车型客车案例。

transform: translate(15px, 40px); /* shift left 15px and down 40px */
transform: scale(2); /* scale to 2 times original size */ transform:
rotate(30deg); /* rotate 30 degrees */ opacity: 0.5; /* set opacity
at 0.5 */

1
2
3
4
transform: translate(15px, 40px); /* shift left 15px and down 40px */
transform: scale(2); /* scale to 2 times original size */
transform: rotate(30deg); /* rotate 30 degrees */
opacity: 0.5; /* set opacity at 0.5 */

那几个属性动画品质特出的原因是,这几个属性位于浏览器渲染器的顶层。您能够把贰个网页看成贰个餐桌,动画那一个属性就就好像于运动三个羹匙,动画底层属性类似于活动整个餐桌布,您须求同有的时候间活动方面包车型大巴具备覆盖物,所以更加的困难一些(质量就能差一点)。

您能够通过阅读那篇文章,领悟动画质量的越来越多新闻。

为了最大化的帮忙您的卡通片,您可能须求加浏览器前缀(verdor
prefix),您也得以到Caniuse询问更加多的协作情形。

别的注意,盒阴影(box-shadow)不常会影响动画质量,所以猛烈建议使用盒阴影时只顾运动器械的测量检验。

2.5 触摸事件(Touch 伊芙nt)的坐标记册难题

触摸事件的坐表明册难点也正如神秘,因为坐标在差异装备中积攒区域分化。一些配备(举个例子ios)的触动坐标和单击坐标一样,而另一对(比方android)设备则不一样。好消息是,在其余活动道具中都能够因而特定的触摸事件数据(touch
event data)获取坐标。

对此触摸事件来讲,使用e.touches[0].pageX而非e.pageX收获触摸点的x坐标,获取y坐标也是临近的道理。上边是某些也许实际应用的代码。

JavaScript

/* event */ document.onclick = function(e){ var x = e.pageX; // get x
coordinate of click var y = e.pageY; // get y coordinate of click
console.log(‘x = ‘ + x + ‘, y = ‘ + y); // show coordinates in console }
/* for touch event */ document.ontouchstart = function(e){ var x =
e.touches[0].pageX; // get x coordinate of touch var y =
e.touches[0].pageY; // get y coordinate of touch console.log(‘x = ‘ +
x + ‘, y = ‘ + y); // show coordinates in console }

1
2
3
4
5
6
7
8
9
10
11
12
/* event */
document.onclick = function(e){
    var x = e.pageX; // get x coordinate of click
    var y = e.pageY; // get y coordinate of click
    console.log(‘x = ‘ + x + ‘, y = ‘ + y); // show coordinates in console
}
/* for touch event */
document.ontouchstart = function(e){
    var x = e.touches[0].pageX; // get x coordinate of touch
    var y = e.touches[0].pageY; // get y coordinate of touch
    console.log(‘x = ‘ + x + ‘, y = ‘ + y); // show coordinates in console
}

世家不要紧模拟器里测量检验下方面包车型的士代码。

2.6 总结

正文罗列一些响应式网页开垦中的一些遍布陷阱,并点名了对应的化解方案,希望得以对你为你节省时间,一些些麻烦。

招待通过评价切磋、指教。

2 赞 4 收藏
评论

澳门凯旋门注册网址 1

相关文章