响应式

移动端字体自适应

完美适口:

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

为了使开发出来的应用或页面大小能适合各种高端手机使用,我们采用了h5的viewport来解决手机分辨率和屏幕大小的不同

    <meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
            

响应式网页设计–css设置网页字体大小自适应

响应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?

IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{font-size:62.5%; 
            

响应式网页设计

 responsive(2)
前端技术

概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。

用3个步骤实现响应式网页设计

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合,来进行多种分辨率适配的例子。
文中提到的响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。…

移动互联网时代:响应式网页设计已成为大势所趋

我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步。智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网。

通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够“移动友好”,阅读体验完全跟不上传统的 Web 版本;而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼。…