squall140
squall140

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

　　例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。

CSS3 Media Queries

看下这个 在线演示，调整你的浏览器窗口尺寸，看看它的变化。

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

?
1
2
3
4
5
@media screen  and ( max-width : 600px ) {
   .class {
     background : #ccc ;
   }
}

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

?
1
< link  rel = "stylesheet"  media = "screen and (max-width: 600px)"  href = "small.css"  />

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

?
1
2
3
4
5
@media screen  and ( min-width : 900px ) {
   .class {
     background : #666 ;
   }
}

Multiple Media Queries

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

?
1
2
3
4
5
@media screen  and ( min-width : 600px ) and ( max-width : 900px ) {
   .class {
     background : #333 ;
   }
}

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

?
1
2
3
4
5
@media screen  and (max-device- width : 480px ) {
   .class {
     background : #000 ;
   }
}　

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

?
1
< link  rel = "stylesheet"  media = "only screen and (-webkit-min-device-pixel-ratio: 2)"  type = "text/css"  href = "iphone4.css"  />　

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

?
1
2
< link  rel = "stylesheet"  media = "all and (orientation:portrait)"  href = "portrait.css" >
< link  rel = "stylesheet"  media = "all and (orientation:landscape)"  href = "landscape.css" >　

Media Queries for IE

遗憾是的，IE8 及更老版本的浏览器不支持 CSS3 Media Queries，不过可以使用 Javascript  弥补，下面是一些解决方案：

附：CSS3 Media Queries 浏览器兼容性表

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第1张图片

 

CSS3 Media Queries 应用案例

需要在下面这些支持 Media Queries 特性的浏览器中浏览：IE9+, Firefox, Chrome 和 Safari。浏览每个站点，看页面布局是如何响应浏览器窗口变化的。

Hicksdesign

  • 大尺寸: 3 列侧栏
  • 较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)
  • 更小尺寸: 1 列侧栏 (右列上移到标志下方)
  • 最小尺寸: 没有侧栏 (LOGO及右列上移，其他侧边栏列移到底部)

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第2张图片

Colly

页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第3张图片

A List Apart

  • 大尺寸: 导航在顶部，图片只有一行。
  • 中等尺寸: 导航在左边，图片变成3列。
  • 小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第4张图片

Tee Gallery

这个和前面的 Colly 很像，不过这个案例中的图片也会随着布局的变化而变化。技巧是使用百分比设置元素的宽度。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第5张图片

总结

　　请记住：为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化，要削减图像大小、标签数量和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现，而不是优化。

你可能感兴趣的:(响应式设计)

  • 响应式电子邮件设计指南：MJML实践教程
    本文还有配套的精品资源，点击获取简介：响应式设计在电子邮件领域至关重要，确保邮件内容在各种设备上均能良好显示。MJML（MailjetMarkupLanguage）是一个专门用于创建响应式电子邮件模板的开源标记语言。本示例详细介绍了如何使用MJML来设计自适应的邮件模板，涵盖安装工具、使用预定义组件、编译HTML代码等关键步骤。通过实际操作MJML的预定义组件如mj-head、mj-body、mj
  • Android操作系统的UI适配方案研究 操作系统内核探秘 操作系统内核揭秘androiduiai
    Android操作系统的UI适配方案研究关键词：AndroidUI适配、屏幕密度、分辨率适配、约束布局、多屏幕支持、响应式设计、dp/sp单位摘要：本文深入探讨Android操作系统中的UI适配问题及其解决方案。文章从基础概念入手，分析Android碎片化带来的适配挑战，详细介绍多种适配方案的技术原理和实现方法，包括尺寸单位、布局技术、资源限定符等。通过实际代码示例和数学模型，展示如何构建适应不同
  • Tailwind CSS 响应式设计实战指南 qcidyu 用户体验代码优化移动优先网站布局前端开发TailwindCSS响应式设计
    title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计
  • Web字体特效全攻略：从基础到创新设计
    本文还有配套的精品资源，点击获取简介：Web字体特效通过结合HTML、CSS和JavaScript，增强网页文本的视觉表现和交互性。文章详细介绍了实现这些特效的技术要点，包括HTML基础结构的设置、CSS样式和新特性的应用，以及JavaScript和相关库的使用。此外，还讲解了字体图标、动画库的利用，以及响应式设计的考虑，确保字体特效在不同设备上的兼容性。提供丰富的实例和资源，旨在帮助开发者打造具
  • 构建炫酷的Tab选项卡：实现与设计全攻略
    本文还有配套的精品资源，点击获取简介：Tab选项卡是网页设计中用以组织内容的常见元素，本文将详细探讨创建炫酷Tab选项卡所需的关键技术点。首先，介绍HTML的标签使用和输入控件。接着，深入CSS样式设计，包括视觉效果和动态效果。然后，讲解JavaScript在实现选项卡切换逻辑中的作用。此外，讨论响应式设计的重要性以及ARIA属性在增强无障碍性中的应用。文章最后，列出实现Tab选项卡可能用到的文件
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果 申增浩
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
  • html结构解析 ca_rry 前端html
    ：声明为HTML5文档：根元素，指定页面语言为中文：设置字符编码，确保中文正常显示：实现响应式设计，使页面在移动设备上正确显示：设置浏览器标签页标题：内嵌CSS样式，用于定义页面元素的显示效果：页面主容器，用于统一管理页面内容的布局：页面主标题，应用了自定义标题样式：示例图片，添加了悬停缩放效果：表单容器，包含输入框、下拉选择器和提交按钮：特性列表，使用自定义列表样式
  • 打造完美Web登录界面：HTML、CSS与Bootstrap实战 Suvo Sarkar
    本文还有配套的精品资源，点击获取简介：登录界面是用户与Web应用程序互动的起点，其设计和实现对用户体验至关重要。本教程将指导开发者如何使用HTML、CSS和Bootstrap框架创建一个功能齐全且视觉吸引力强的登录界面。内容涵盖从基础的表单标签到使用Bootstrap的响应式设计，以及如何结合JavaScript和后端技术来增强界面的业务逻辑和用户验证功能。1.HTML表单标签基础HTML表单标签
  • 2014年最具人气国外WORDPRESS主题 weixin_34355715 php前端uxViewUI
    在国外，WrodPress这个博客系统极为受欢迎，使用WordPress来建站可以降低很多成本，另外还能以十分便宜的价格获得一个漂亮的WP网站模板。今天向大家分享来自Themeforest2014年最具人气的高级WrodPress主题，这些主题无论是设计还是技术上，都是目前最新最流行的。比如CSS3、扁平化、响应式设计、全屏视频背景、视差滚动特效等等。本次分享的WP主题实用性非常不错，流行的设计+
  • CSS 单位完全指南：掌握 em、rem、vh、vw 等响应式布局核心单位 编程随想▿ CSScss前端html网页布局
    目录一、绝对单位vs相对单位二、核心相对单位详解1.em单位2.rem单位（Rootem）3.vh与vw单位4.vmin与vmax单位三、实战应用场景对比五、专家建议与最佳实践六、总结一、绝对单位vs相对单位绝对单位（如px）固定不变，而相对单位则基于其他参考值动态计算，更适合响应式设计：/*绝对单位示例*/.fixed-size{width:300px;/*始终为300像素*/}/*相对单位示例
  • React 英语打地鼠游戏——一个寓教于乐的英语学习游戏 伍哥的传说 前端源码分享react.js游戏学习
    英语打地鼠游戏一个寓教于乐的英语学习游戏，通过经典的打地鼠玩法帮助用户学习英语单词。✨项目特色游戏化学习经典打地鼠玩法：6个洞穴，听英文选单词即时反馈：答对/答错立即语音提示计分系统：每答对一题得10分，激发学习动力60秒限时：紧张刺激的游戏节奏多媒体体验双语语音播报：英文单词标准发音+中文反馈流畅动画效果：基于Anime.js的精美动画响应式设计：支持手机、平板、电脑多端适配丰富词库多主题分类：
  • 前端开发常见问题
    技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理
  • 前端领域的前端设计模式技巧分享 前端视界 前端艺匠馆前端设计模式状态模式ai
    前端领域的前端设计模式技巧分享关键词：前端设计模式、组件化开发、状态管理、性能优化、代码复用、可维护性、响应式设计摘要：本文深入探讨前端开发中的设计模式应用技巧，从基础概念到高级实践，全面解析如何通过设计模式提升前端代码质量。文章将详细介绍常见的前端设计模式如观察者模式、单例模式、工厂模式等，并结合React、Vue等现代框架展示实际应用场景。同时，我们还将探讨设计模式在状态管理、性能优化和组件复
  • 构建高效的jQuery地理选择器组件 Kiki-2189
    本文还有配套的精品资源，点击获取简介：本项目展示了如何利用jQuery构建一个在网页中常用的二级和三级城市选择器。这种选择器对于地理位置选择场景尤为重要，例如在线购物和预订服务。组件通过动态DOM操作、JSON数据结构、事件绑定、异步数据加载、插件化、样式美化、响应式设计、性能优化和无障碍访问等技术点，提供了一个高效、易用和适应性强的用户体验。同时，还需注意代码的兼容性、错误处理和全面的测试。1.
  • 元旦倒计时项目实战：CSS+HTML+JS网页实现 BIG-HO
    本文还有配套的精品资源，点击获取简介：本文介绍了一个使用CSS、HTML和JavaScript技术实现的网页倒计时项目，该项目展示了距离元旦还有多少时间。CSS负责页面布局、美化和响应式设计，HTML构建页面结构并绑定数据，而JavaScript则处理时间计算、定时更新以及可能的交互事件。通过这个项目，开发者可以学习和掌握前端开发的动态效果与时间处理技巧。1.网页倒计时项目介绍在现代的数字营销和事
  • 深入剖析 CSS 属性计算全流程：从层叠冲突到实际渲染值
    CSS看似简单，但浏览器内部处理一个CSS属性值却经历多步变换——从级联冲突、继承、单位转换到布局阶段，最终生成屏幕呈现的具体像素。这一过程对复杂布局、响应式设计、性能调优等尤为关键。本文从规范和实践层面详解每个阶段，帮你写出更可靠、有效率的样式。一、CSS的四步值变换模型浏览器对每条CSS属性遵循如下清晰流程（按CSS2/CSS4定义）：级联值（Cascaded）：整合多个来源（用户、作者、UA
  • 自适应企业网站建设的重要性与实施策略 Yuechen12 安全科技
    一、引言随着互联网技术的飞速发展和智能设备的多样化，企业网站已不仅是信息展示的窗口，更是连接用户、提升品牌体验的关键渠道。自适应网站建设，作为响应式设计的一种高级形态，能够智能适配各种设备屏幕，确保用户在不同设备上都能获得一致且优质的浏览体验。本文将深入探讨自适应企业网站建设的重要性、实施策略以及关键注意事项。二、自适应网站建设的重要性1.提升用户体验自适应网站能够智能调整布局和样式，以适应不同分
  • Python实例题：基于 Flask 的在线聊天系统
    目录Python实例题题目要求：解题思路：代码实现：Python实例题题目基于Flask的在线聊天系统要求：使用Flask框架构建一个实时在线聊天系统，支持以下功能：用户注册、登录和个人资料管理一对一实时聊天功能群聊功能消息通知和未读消息提示在线用户状态显示使用Flask-SocketIO实现实时通信。使用SQLite数据库存储用户、聊天记录等信息。添加美观的前端界面，支持响应式设计。解题思路：使
  • 前端开发核心：HTML、CSS与JavaScript学习指南 Randy Rhoads
    本文还有配套的精品资源，点击获取简介：HTML、CSS和JavaScript是前端开发的基础，分别负责网页的结构、样式和动态行为。学习这三种技术需要理解它们之间的关系及其协同工作的机制。本笔记提供了一个全面的复习资料，包括标签使用、CSS布局技巧、JavaScript基础语法和DOM操作，旨在帮助巩固知识点和发现潜在的学习盲点。同时，介绍了响应式设计、Web组件、ServiceWorker等现代前
  • Axure版ArcoDesign 组件库-免费版 AxureMost axure模板-素材axure产品经理
    ArcoDesign元件库是字节系基于ByteDesign升级而来的、能力全面的企业级产品设计系统。以下是对它的详细介绍：链接地址特点丰富的组件和样式：包含各种类型的组件，覆盖了多种交互场景，如通用类、布局类、数据展示类、数据输入类、反馈类、导航类等。同时提供丰富的颜色主题配置，支持自定义，包括基础颜色、字体、阴影等，且支持可视化编辑与实时预览。灵活的布局方案：基于模块化设计，支持响应式设计，便于
  • styled-components：现代React样式解决方案 司南锤 前端react.js前端前端框架
    文章目录引言什么是styled-components？核心特性安装与配置基础安装TypeScript支持Babel插件（可选）基础用法创建样式组件基于props的动态样式高级用法样式继承复合样式与条件渲染样式化现有组件主题系统创建主题访问主题响应式设计媒体查询助手动画与过渡关键帧动画过渡效果最佳实践1.组件命名2.样式组织3.避免过度嵌套4.使用TypeScript性能优化1.避免在渲染中创建样式
  • Flutter介绍 PyCrawlFlutter Lab Flutter开发flutter
    什么是Flutter？Flutter是一个开源的UI软件工具包，由谷歌开发，用于从单一的代码库创建精美的、编译型的移动应用、Web和桌面应用程序。它使用Dart语言编写，特别注重性能和响应式设计。Flutter的优势和不足优势Flutter是一个完全免费且彻底开源的软件开发工具包，它加速了应用的开发过程。通过Flutter，开发者能够设计出卓越的用户界面（UI），同时显著减少代码编写量。它还允许开
  • Python 开发法律条文咨询APP Geeker-2025 python
    #法律条文咨询APP-Python实现方案我将设计一个基于Python的法律条文咨询应用，提供一个直观的界面让用户轻松查找和浏览法律条文。##设计思路-使用Flask作为后端框架，轻量且高效-SQLite数据库存储法律条文数据-前端使用Bootstrap实现响应式设计-实现关键词搜索和分类浏览功能-提供条文详情展示和书签功能##完整实现代码###文件结构```legal_app/├──app.py
  • 探索响应式设计新境界：React Native Responsive Dimensions 姚婕妹
    探索响应式设计新境界：ReactNativeResponsiveDimensionsreact-native-responsive-dimensionsResposivefontSize,heightandwidthforreact-nativecomponents,thatautomaticallyadjustsitselfbasedonscreen-sizeofthedevice.项目地址:h
  • 前端领域HTML的表单美化技巧 前端视界 前端htmlai
    前端领域HTML的表单美化技巧关键词：HTML表单、CSS美化、用户体验、交互设计、响应式布局、表单验证、前端框架摘要：本文将深入探讨HTML表单的美化技巧，从基础CSS样式到高级交互效果，全面解析如何提升表单的视觉吸引力和用户体验。我们将通过详细的代码示例、设计原则和实战案例，帮助开发者掌握表单美化的核心技能，包括响应式设计、动画效果、自定义组件等前沿技术。1.背景介绍1.1目的和范围本文旨在为
  • React 学习计划 夜游猿 Reactreact.js学习前端
    React学习计划前置知识目标熟练掌握HTML、CSS和JavaScript的基础知识。了解ES6+的新特性。学习内容HTML:标签属性表单布局CSS:选择器盒模型布局（Flexbox,Grid）响应式设计JavaScript:变量数据类型控制结构函数对象数组DOM操作ES6+:箭头函数模板字符串解构赋值类模块化资源MDNWeb文档《你不知道的JavaScript》（上卷）React基础目标能够创
  • HOW - 图像加载自动优化方案 @PHARAOH javaspring前端
    文章目录前言next/image自动优化的实现原理1.图像请求通过ImageOptimizationAPI拦截2.根据设备屏幕密度自动调整图像尺寸3.自动格式转换（WebP/AVIF）4.CDN缓存与重用（在Vercel上）5.LazyLoading&优化加载顺序总结：自动优化是如何做到的生成的HTMLsrc设置:w=750&q=75的含义为什么要调整尺寸w？1.响应式设计需求2.节省带宽，避免加
  • HTML响应式Web设计 水云桐程序员 前端htmljavascript
    什么是响应式Web设计？RWD指的是响应式Web设计（ResponsiveWebDesign)RWD能够以可变尺寸传递网页RWD对于平板和移动设备是必需的创建一个响应式设计：.city{float:left;margin:5px;padding:15px;width:300px;height:300px;border:1pxsolidblack;}HTMLDemoResizethisreponsi
  • 【鸿蒙开发】响应式设计 harmonyos-next
    前言响应式设计（ResponsiveWebDesign，简称RWD）在Web网站设计领域是一种网页设计方法论，旨在让网站在不同设备和屏幕尺寸上都能提供良好的阅读和交互体验，而无需为每一个新设备或屏幕尺寸创建单独的版本。这种设计方法的核心在于页面布局和内容可以根据用户所使用的设备特性（如屏幕尺寸、分辨率、方向等）进行灵活调整。实现断点响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及
  • 专注搜索引擎优化的专业模板平台 wodrpress资源分享 独立站搜索引擎mobanhtml
    SEO模板seomoban.com定位：致力于提供SEO友好型网站模板，核心目标是帮助用户提升网站在搜索引擎中的排名和在线可见性。核心优势与技术特性：深度SEO优化所有模板均经SEO专家审核，确保代码结构简洁规范，符合搜索引擎爬虫索引标准，从底层提升收录效率。集成元标签编辑器、关键词优化建议等工具，简化SEO操作流程。高性能与响应式设计模板加载速度经过专项优化，符合Google等搜索引擎的页面体验
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他