响应式布局、手机设备站

@-ms-viewport,
@viewport {
width: device-width;
}

用于适配不同屏幕,因为在IE10的捕捉模式(snap mode)下,Windows 8 Metro模式下的一个特性,可以将浏览器拖至屏幕的左端或右端,同时使用两个窗口。奇怪的是, 要解决这个问题,开发者就要使用上面介绍的device-width方法,或者在media query里面使用@viewport规则。

与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。zoom相当于initial-sacale,类似:

@viewport {
   width: device-width;
   max-zoom: 3;
   min-zoom: 0.50;
}

其实就是<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>的CSS化

时间: 2024-10-22 14:03:27

响应式布局、手机设备站的相关文章

使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适应,这样的话就会出现换行掉下去的情况,不会出现横向滚动条. 1.动态给ul设置宽度 遍历li元素求出所有的li的宽度和,这样就能动态给ul设置宽度. 2.给ul父盒子设置overflow-x:scroll;属性

java企业站源码 响应式 兼容手机平板PC 主流SSM 框架 freemaker 静态引擎

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 点击:获取地址   QQ 313596790 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4

java企业站源码 响应式 兼容手机平板PC 主流SSM框架 freemaker 静态引擎

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java we

响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)

以下是我摘抄并翻译的,想了解更多原文在尾部有链接哈~ -webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率) 设备 分辨率 设备像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0 设备像素为:1.0    (-webkit-min-device-pixel-rati

java 企业站源码 自适应响应式 兼容手机平板PC SSM freemaker 静态引擎主流框架

前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 赠送pom.xml)  数据库:mysql --------

基于不同设备下的响应式布局的原理

一.响应式开发 现在移动设备用户的增多,我们在PC端开发的页面不能完美的适配于移动端,那为了让移动端的用户拥有用好的体验效果,一般来说,我们会针对移动端来做一套特定的版本.而显然,技术是不断更新迭代的,这时候就出现了响应式开发,指的是同一页面在不同屏幕尺寸下有不同的布局,即用一套代码,来适配不同的设备. 二.响应式布局的原理 1.通过CSS中的媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式. 语法:@media all and(min-width:??px)and(

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

响应式布局3

响应式布局简明示例,响应式布局最好同时也是自适应布局,然后再配合css3媒体查询,来达到完美的响应式布局.css3的媒体查询ie9一下是不支持的,这太遗憾了,不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件,引用方式如下:<!--[if lt IE 9]>    <script src="http://scottjehl.github.io/Respond/dest/respond.src.js"></script><!

基于Bootstrap3制作响应式布局网站(一)

前言 原创文章,欢迎转载,请保留出处. 有任何错误.疑问或者建议,欢迎指出. 我的邮箱:[email protected] 现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷.Bootstrap是Twitter推出的一个用于前端开发的开源工具包,其中的一个特性就是支持响应式布局. 何为响应式布局 我们可以查阅百度百科得到比较权威的解析: 响应式布局是Ethan Marcotte在2010年5

响应式布局简明示例

响应式布局简明示例,响应式布局最好同时也是自适应布局,然后再配合css3媒体查询,来达到完美的响应式布局.css3的媒体查询ie9一下是不支持的,这太遗憾了,不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件,引用方式如下:<!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">&