- 浏览: 3362230 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
http://my.oschina.net/jsan/blog/603377
/** * iPhone 4/4s landscape & portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) { } /** * iPhone 4/4s portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait) { } /** * iPhone 4/4s landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape) { } /** * iPhone 5/5s landscape & portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /** * iPhone 5/5s portrait */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /** * iPhone 5/5s landscape */@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /** * iPhone 5/5s landscape & portrait */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /** * iPhone 5/5s portrait */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /** * iPhone 5/5s landscape */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { //iPhone 6 Portrait} @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { //iPhone 6 landscape }@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { //iPhone 6+ Portrait} @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { //iPhone 6+ landscape} @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ //iPhone 6 and iPhone 6+ portrait and landscape} @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ //iPhone 6 and iPhone 6+ portrait} @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ //iPhone 6 and iPhone 6+ landscape} /** * Galaxy S3 landscape & portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) { }/** * Galaxy S3 portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { }/** * Galaxy S3 landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { }/** * Galaxy S4 landscape & portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { }/** * Galaxy S4 portrait */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { }/** * Galaxy S4 landscape */@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }/** * Galaxy S5 landscape & portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { }/** * Galaxy S4 portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { }/** * Galaxy S4 landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }/** * HTC One landscape & portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { }/** * HTC One portrait */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { }/** * HTC One landscape */@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }/** * iPad Mini landscape & portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad Mini portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad Mini landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad 1/2 landscape & portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad 1/2 portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad 1/2 landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { }/** * iPad 3/4 landscape & portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { }/** * iPad 3/4 portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { }/** * iPad 3/4 landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { }/** * Galaxy Tab 10.1 landscape & portrait */@media(min-device-width: 800px) and (max-device-width: 1280px) { }/** * Galaxy Tab 10.1 portrait */@media(max-device-width: 800px) and (orientation: portrait) { }/** * Galaxy Tab 10.1 landscape */@media(max-device-width: 1280px) and (orientation: landscape) { }/** * Asus Nexus 7 landscape & portrait */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) { }/** * Asus Nexus 7 portrait */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) { }/** * Asus Nexus 7 landscape */@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) { }/** * Kindle Fire HD 7" landscape & portrait */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) { }/** * Kindle Fire HD 7" portrait */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { }/** * Kindle Fire HD 7" landscape */@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) { }/** * Kindle Fire HD 8.9" landscape & portrait */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) { }/** * Kindle Fire HD 8.9" portrait */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) { }/** * Kindle Fire HD 8.9" landscape */@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) { }/** * Non-Retina Screens */@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { }/** * Retina Screens */@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { }/** * Apple Watch */@media(max-device-width: 42mm) and (min-device-width: 38mm) { }/** * Moto 360 Watch */@media(max-device-width: 218px) and (max-device-height: 281px) { }
发表评论
-
echart使用记录
2016-06-22 09:24 1757ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1523原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1178http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1168http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1232http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 965http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1420http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1565介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1588资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4301JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 961原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 984http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 2006http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 935[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 500http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1003HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 963http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1007详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 926http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 932http://my.oschina.net/zhangxuma ...
相关推荐
接下来,我们将了解一下怎样通过HTML5和CSS3 MediaQueries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩
如果您不熟悉围绕响应式网页设计的概念,您可以阅读和(颜色更改以显示媒体查询工作)使用说明使用最小/最大宽度媒体查询制作您的 CSS,以适应您从移动设备(首先)一直到桌面设备的布局 @media screen and (min-...
media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。随着移动互联网的发展,media query开始得到大家的重视。 media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 一个框架、多种...
插件,用于使用移动设备优先或桌面优先方法对CSS媒体查询进行合并和排序。 将相同的媒体查询合并为一个-这是该插件的意外副作用 :dna: 例子 移动优先排序 /* before */ @media screen and ( max-width : 640 px ) ...
随着手机等移动设备的普及,用户的使用场景开始大面积从PC端转移至移动端,Web前端的开发工作也更多地偏向移动端应用。所以,有效地掌握移动端网页样式布局,是成为一名合格前端开发工程序的必要条件。移动端因其较好的...
在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { ...
我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。 第一步:Meta标签(看demo) 大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度,这样内容就可以屏幕上...
在小型设备上加载适合移动设备的组件,在台式机上加载更强大或更重的组件。 使用 CSS 隐藏已加载的 DOM 元素,但仅在需要时加载资产和内容,您需要添加一些 javascript。 ##如何? 包含模块并使用脚本标签在 ...
他坚持响应式设计,各个组件兼顾移动端,平板,桌面浏览器等多个不同屏幕尺寸的场景,你可以使用Vue Human内置自己的移动应用,中后台管理界面或者你想要做的别的事。资料参与和改进Human的开发项目克隆至本地后,...