CSS响应式字体,自适应视图窗口大小

这似乎是一个新的字体大小单位 Viewport-Percentage Lengths.

一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。

1vw = 当前视图窗口(viewport)1%的宽度

1vh = 当前视图窗口(viewport)1%的高度

1vmin = 1vw 或 1vh, 取决于哪个更小一点

1vmax = 1vw 或 1vh, 取决于哪个更大一点

样式中直接:width:1vw;

参考:http://ourjs.com/detail/549cbea78a34fa3204000024

当然也可以使用其他方案,比如 media query 

推荐看下这个:http://blog.csdn.net/dyllove98/article/details/9246397

不错的,有几种可用解决方案,试试

时间: 2024-10-31 15:46:37

CSS响应式字体,自适应视图窗口大小的相关文章

响应式和自适应的区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念.先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880.比如 开源中国的网页就是固定宽度为998

响应式与自适应设计

两者的区别? 首先,响应式和自适应最为关键的区别是什么呢? 简而言之,响应式(百分比)就相当于液体,它可以自动适应不同尺寸的屏幕,无论你的设备尺寸多么奇葩.响应式使用CSS media queries的方法,根据目标设备自动改变风格如显示类型,宽度.高度等,这能很好解决不同屏幕尺寸的显示问题. 而自适应设计是基于断点使用静态布局,一旦页面被加载就无法再进行自动适应,自适应会自动检测屏幕的大小来加载适当的工作布局,也就是说,当你要采用自适应设计网站时,你得一个一个设计6种常见的屏幕布局. 1.32

响应式、自适应式

一点点补充 响应式布局与自适应布局的区别: 1.自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端.平板.手机,从而请求服务层,返回不同的页面:响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容. 2.自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了. 1.灵活性不同: 静态布局:毫无灵活性可言,目前已逐渐被淘汰. 自适应布局:静态布局的升级版,因其强大的灵活性,已逐渐成为高端网页的代名词. 流式布局:灵活性更高,可适用于其他三种网

HTML5与CSS响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片.UI前端框架最新力作!有奖试读! CSS 响应式图片 对于很多 IOS 开发者来说可能已经

web前端-移动端响应式与自适应

一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 简单分析一下这一行代码的含义:width=device

响应式和自适应(Responsive design 和 Adaptive design)

前二天做了几个手机端页面,本来用CSS3的@media 但因为对它还不是很了解,调试多次不成功.因为时间比较赶,为了实现最终的页面效果,我用JS去获取了屏幕的大小去控制了最终的字体大小. 做完后闲下来我查了一下资料,更加深入的去了解了一下何为响应式.发现原来我最终的页面,只能叫自适应,而不叫响应式.对于页面来说 没有实际上显示的问题(经过查资料显示貌似自适应比响应式更完善)不过我的初衷还是做响应式,在做响应式遇到问题时临时做的自适应. 响应式的基本概念是: 简而言之,就是一个网站能够兼容多个终端

web前端响应式布局,自适应全部分辨率

写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单了解过,没真正实践啊.bootstrap比我想象的要好用的多.关键是.关键来了-- app端是仅仅有手机的,pc基本上木有.那就是说仅仅能依照手机端开发,那么boostrap响应式布局就不适用于app了(反正我是做了一套半成品,被推翻了).不能愉快的工作了.好不淡定的时间. .百度.百又问问同事.发

响应式和自适应

很多人容易把[响应式设计]和[自适应]混为一谈,认为都是适配不同的终端,然而他们两个是有本质的区别.响应式设计的目标对象是PC端和Mobile端web页面,设计师出一张图,告诉开发人员,在PC上要显示哪些内容,在Mobile上要显示哪些内容,只需要一个url,一套代码即可.自适应的目标对象是Mobile端web页面,设计师出一张图,开发人员写一套代码,来适配不同手机不同浏览器.他们的根本区别在于显示内容,响应式设计会根据设备来显示不同的内容,而自适应会显示相同的内容,不管设备是什么.综上,你的网

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g