响应式设计三部曲

原文：Responsive Design in 3 Steps

译文：响应式设计的三个步骤

译者：dwqs

现在，响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉，可以看看我之前发表过的关于这方面的responsive sites。对于新人，responsive design可能听起来有点复杂，但实际上，它比你想的要简单的多。为了帮助你快速入门响应式Web设计，我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。

第一步：Meta标签（看demo）

  大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度，这样内容就可以屏幕上正确的展示了。你可以使用viewport这个meta标签 来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewport的宽度，并且禁用初始的缩放比例。 在<head>中加入这个meta标签。

meta name="viewport" content="width=device-width, initial-scale=1.0">

  IE 8以及更早版本不支持媒体查询，你可以使用media-queries.js或者respond.js来增加IE对媒体查询的支持。

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]—>
 
第二步：HTML结构

  在这个例子中，我拥有一个由头部，内容容器，侧边栏，以及一个底部构成的基本的页面布局。头部拥有一个固定的180px高度，内容容器600px宽，然后侧边栏是300px宽。

 

响应式设计三部曲

第三步：媒体查询

  CSS3 media query是进行响应式设计的戏法，它跟写if条件一样，来告诉浏览器对于特定的viewport宽度如何渲染页面。

  下面的规则是针对视口宽度小于等于980px设计的。基本上，我把所有容器的宽度从像素值改成了百分比值，这样容器就会变得具有流动性(fluid)。

响应式设计三部曲

然后对于宽度小于或等于700px的viewport，指定#content和#sidebar为自动宽度，并且移除浮动，所以他们可以以全宽度进行展示。

响应式设计三部曲

对于宽度小于等于480px(移动设备屏幕)的，重置#header的高度为auto，修改h1的字体大小为24px，并且隐藏#sidebar。

响应式设计三部曲

你可以想写多少媒体查询就写多少。我在demo中只展示了三个媒体查询。媒体查询的目的是对于指定的viewport宽度可以通过应用不同的CSS规则来获得不同的布局。媒体查询可以在同一个样式表中或者在一个单独的文件中。

总结

  这个教程意图在于向你展示基本的响应式设计，如果你想更深入的了解，可以看看我之前的文章：Responsive Design With Media Queries.

 

原文首发：http://www.ido321.com/1395.html

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

  • 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等搜索引擎的页面体验
  • padding和margin这种，项目里面怎么设置值，使用px还是rem 还是什么，有什么区别 今日亦是美好的一天 前端javascript开发语言
    目录1.px（像素）2.rem（相对于根元素的font-size）3.em（相对于父元素的font-size）【不合适】4.vw和vh（视口宽度和高度）[不合适]5.%（百分比）【不合适】总结与建议移动端开发PC端开发1.px（像素）特点：绝对单位，基于屏幕像素。优点：精确控制元素的大小和间距。适合固定布局，不需要考虑响应式设计。缺点：不适合需要适配不同屏幕尺寸的项目。在移动端开发中，可能需要额外
  • 第七节 移动端适配-视口与REM布局 泽泽爱旅行 csshtml前端css
    以下是关于移动端适配中的视口与REM布局的全面解析，结合核心原理、实现方案、应用场景及优化策略，帮助开发者深入理解并高效实现响应式设计。一、视口（Viewport）的核心概念1.视口类型布局视口（LayoutViewport）浏览器默认的视口宽度（通常为980px），用于在移动端显示PC页面，需缩放才能适应屏幕。视觉视口（VisualViewport）用户当前可见的屏幕区域，随缩放或滚动变化。理想
  • C#按钮控件美化：自定义样式与动画效果 谛听汪
    本文还有配套的精品资源，点击获取简介：C#中的按钮控件是用户交互的关键元素，通过美化其外观可以显著提升应用体验。文章展示了多种按钮美化技术，包括自定义背景、边框样式、文字样式、形状变化、动画效果、事件处理、模板样式、利用第三方库和响应式设计。封装这些技术的类文件可以被开发者引用，以便于快速实现美观且一致的按钮设计。1.C#按钮控件美化概述在当今的软件开发中，用户界面(UI)的美观性和用户交互体验(
  • 保持元素的宽高比 ＆白帝＆ csscss前端
    保持元素宽高比的多种CSS方法在响应式设计中，保持元素的宽高比是一个常见需求。以下是几种实现方法：1.使用padding百分比技巧(经典方法).aspect-ratio-box{position:relative;width:100%;padding-top:56.25%;/*16:9宽高比(9/16=0.5625)*/}.aspect-ratio-content{position:absolut
  • 前端基础知识CSS系列 - 13（响应式设计的基本原理） 前端小白从0开始 前端css响应式
    一、是什么响应式网站设计（ResponsiveWebdesign）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Contentislikewater”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点：同时适配PC+平板+手机等标签导航在接近手持终端设备时改变为经典的抽
  • 10个受欢迎的wordpress外贸主题 wodrpress资源分享 wordpresswordpress
    Doge东哥wordpress英文外贸模板Doge东哥WordPress英文外贸模板是一款专为中小型企业设计的外贸网站模板，适合机器、设备、机械等行业外贸出海建英文版网站。以下是该模板的主要特点：设计风格简洁大气：首页设计简洁明了，顶部导航栏清晰展示网站主要栏目，包括首页、关于我们、新闻、产品、案例、页面和联系方式。响应式设计：支持多设备浏览，确保网站在桌面、平板和移动设备上都能提供良好的用户体验
  • 一览2025年戛纳国际创意节全场大奖（1） marteker 人工智能
    来源：lionscreativity.com设计全场大奖获奖者：FCB芝加哥活动名称：有意图的标题文案客户：美国电影艺术与科学学院-拉基什-芝加哥听障人士协会在1087件参赛作品中，有33件作品获奖：5件金奖、11件银奖、16件铜奖。全场大奖授予了FCB芝加哥公司的「有意图的标题文案」。通过动画、字体和色彩将字幕转化为响应式设计语言，美国电影艺术与科学学院将该系统纳入奥斯卡提交规则手册，确保无障碍
  • 八字排盘小游戏微信流量主小程序开源 云起SAAS 小程序八字排盘小游戏微信流量主小程
    八字排盘小游戏具有以下特点：完整的表单系统，支持阳历/农历选择八字计算核心算法，基于用户输入的出生年月日时计算四柱八字美观的结果展示界面，包括年柱、月柱、日柱、时柱和生肖信息简单的命理分析解释，增加趣味性响应式设计，适配不同屏幕尺寸交互动画效果，提升用户体验你可以将这些文件按照微信小程序的目录结构组织，然后在微信开发者工具中运行。如需进一步扩展功能，可以考虑增加更详细的命理分析、五行属性计算、大运
  • 可视化魔法指南 前端熊猫 信息可视化前端echart
    ECharts数据可视化魔法指南ECharts：数据的艺术画笔ECharts丰富图表类型⚙️灵活配置系统响应式设计强大交互功能大数据渲染能力生活类比：想象ECharts是一家魔法餐厅，你只需告诉厨师(代码)你想要的菜品类型(图表类型)和口味偏好(配置项)，它就能将你的原料(数据)转变成视觉盛宴。不同于普通餐厅，这家餐厅的菜品会根据食材的变化而自动调整(响应式)，甚至能根据顾客的互动改变形态(交互功
  • 台球桌球微信小游戏流量主小程序开源
    游戏功能说明这个移动端台球游戏小程序具有以下特点：游戏机制：使用白球击打15个彩色球将彩色球打入6个袋口得分白球进袋会重置位置操作方式：触摸屏操作：在桌面上拖拽设置击球方向和力度按钮操作：使用力度滑块和击球按钮击球两种方式均针对移动设备优化物理系统：球体碰撞检测和反弹摩擦力模拟使球逐渐停止简单的弹性碰撞物理游戏界面：响应式设计，适应不同屏幕尺寸分数和剩余球数显示游戏结束提示视觉上吸引人的台球桌设计
  • Nextwind: 探索Next.js、TypeScript和Tailwind CSS的集成 LearningandStudy
    本文还有配套的精品资源，点击获取简介：Nextwind是一个集成Next.js、TypeScript和TailwindCSS的现代化前端开发模板，旨在提供一种高效且美观的开发体验。Next.js框架结合了React的SSR和SSG特性，TypeScript提供了静态类型检查以增强代码质量，而TailwindCSS则以其原子化设计哲学支持快速的样式构建和响应式设计。通过Nextwind，开发者能够享
  • 鸿蒙 UI 设计：组件与布局详解 逻极 笔记鸿蒙harmonyosharmonyosui华为组件布局鸿蒙开放原子
    鸿蒙UI设计：组件与布局详解一、引言鸿蒙应用的用户体验很大程度上取决于界面设计的合理性与美观度，而ArkUI框架作为鸿蒙生态的核心UI开发体系，提供了丰富的基础组件和灵活的布局方案。本文将系统解析ArkUI组件库的核心组件用法，深入讲解弹性布局、响应式设计及多端适配技巧，通过实战案例演示如何构建跨设备的高性能UI界面。二、基础UI组件解析2.1文本与图形组件文本组件（Text）Text("标题文本
  • 深入理解CSS弹性布局中的flex-basis属性 大奇鸭 CSS弹性布局flex-basis属性内容自适应最小尺寸浏览器兼容性
    深入理解CSS弹性布局中的flex-basis属性在CSS弹性布局中，flex-basis属性扮演着核心角色，它决定了flex子项在主轴方向上的初始大小。本文将详细解读flex-basis属性的用法、兼容性以及与其他CSS属性的关系，帮助前端开发者更高效地布局页面。背景简介在现代网页设计中，弹性布局（Flexbox）已成为实现响应式设计的首选。它允许元素在容器内灵活地伸缩以适应不同的屏幕尺寸和内容
  • 前端开发者必须要掌握的技术栈及学习建议，都是干货 老猿阿浪 前端学习前端
    作为前端开发者，必须要掌握的技术栈非常的广泛，但总体脉络不变，以下是当前前端开发的核心技术分类和学习建议，按优先级和重要性排序如下（都是干货）：一、基础三件套（必学）HTML5语义化标签、表单验证、WebAccessibility（无障碍访问）Canvas/SVG、音视频嵌入CSS3盒模型、Flex/Grid布局、响应式设计（媒体查询）动画（Transition/Animation）、变量（CSS
  • HTML5 在前端房地产类网站的应用案例 前端视界 前端艺匠馆前端html5htmlai
    HTML5在前端房地产类网站的应用案例关键词：HTML5、房地产网站、响应式设计、WebGL、地理定位、Canvas、性能优化摘要：本文深入探讨HTML5技术在房地产类网站中的创新应用。我们将分析HTML5如何通过其丰富的API和特性，为房地产行业提供沉浸式的用户体验、高效的房源展示和精准的客户服务。文章涵盖从基础布局到高级3D展示的全套技术方案，并通过实际案例展示HTML5如何解决房地产网站开发
  • 前端 CSS3 背景渐变的高级技巧 大厂前端小白菜 前端css3cssai
    前端CSS3背景渐变的高级技巧关键词：CSS3、背景渐变、线性渐变、径向渐变、重复渐变、混合模式、动画效果摘要：本文将深入探讨CSS3背景渐变的高级应用技巧，从基础语法到复杂实现，涵盖线性渐变、径向渐变、重复渐变等多种渐变类型。我们将通过详细的代码示例和视觉效果分析，展示如何创建令人惊艳的渐变效果，包括渐变动画、混合模式应用以及响应式设计中的渐变技巧。文章还将介绍最新的CSS渐变特性，帮助前端开发
  • Pranxis网站构建全面指南 乾泽
    本文还有配套的精品资源，点击获取简介：Pranxis网站是一个提供庞然大物相关信息的在线平台。构建这样的网站涉及前端和后端开发、数据库管理、Web服务器配置、版本控制、敏捷开发、响应式设计、网络安全、SEO优化、性能提升、监控日志、自动化测试以及持续集成/部署等关键技术点。本文将详细探讨这些方面的技术实现和最佳实践，为开发Pranxis网站提供全面指导。1.pranxis网站技术架构概述在当今数字
  • Vue3 响应式翻牌抽奖游戏 伍哥的传说 前端开发那点事游戏vue.jsjavascript交互前端框架vue
    翻牌游戏项目预览地址项目简介这是一个基于Vue3开发的现代化卡牌游戏项目，采用最新的前端技术栈，为用户提供流畅的游戏体验。技术特点基于Vue3框架开发⚡使用Vite作为构建工具，提供极速的开发体验采用TailwindCSS实现响应式设计支持多端适配使用VueRouter实现流畅的路由管理集成VueDevTools，提供强大的开发调试能力主要功能卡牌游戏核心玩法响应式界面设计流畅的动画效果用户友好的
  • HTML5：网页开发的新纪元 布兰妮甜 移动端开发HTML-结构html5前端html
    文章目录前言一、HTML5技术概述二、主要特点及优势1.多媒体支持2.图形绘制3.离线存储4.表单控件增强5.响应式设计三、应用场景1.游戏开发2.在线教育3.电子商务四、面临的挑战结语前言在互联网技术快速发展的今天，H5（HTML5的简称）作为第五代超文本标记语言，已经成为构建现代网页应用的核心技术之一。它不仅继承了前几代HTML的优点，还加入了许多新特性，极大地丰富了网页的表现力和交互性。本文
  • 使用Vue2.x和ElementUI构建后台管理系统实战指南
    本文还有配套的精品资源，点击获取简介：本文详述了使用Vue.js2.x框架结合ElementUI组件库实现后台管理系统的方法，并结合后端PHP技术实现数据处理和权限控制。介绍了Vue.js的组件化开发特性、ElementUI的UI组件和响应式设计支持、RBAC权限管理模型、AUTH认证授权机制，以及PHP在后端数据处理中的应用。提供了后台管理系统开发的关键技术和实现步骤，旨在指导开发者构建高效的后
  • 前端必备：ElementUI 全面入门指南 前端视界 前端大数据与AI人工智能前端艺匠馆前端elementuijavascriptai
    前端必备：ElementUI全面入门指南关键词：ElementUI、Vue.js、前端框架、UI组件库、响应式设计、表单验证、主题定制摘要：本文是一份全面的ElementUI入门指南，详细介绍了这个基于Vue.js的UI组件库的核心概念、使用方法和最佳实践。文章从基础安装开始，逐步深入到组件使用、主题定制和高级功能，并通过实际项目案例展示ElementUI在企业级应用中的价值。无论你是Vue.js
  • 构建仿淘宝电商网站HTML代码实战教程
    本文还有配套的精品资源，点击获取简介：本项目重点介绍如何使用HTML5构建电子商务平台的网页设计和前端开发，涵盖响应式布局、新特性应用、页面元素设计、CSS3样式设计、JavaScript交互、响应式设计、Web性能优化、无障碍性、SEO优化和数据交互等方面。通过研究提供的仿淘宝网站HTML代码实例，学习如何将这些技术应用于实际项目中，提高前端开发技能。1.网页布局实践1.1网页布局的重要性网页布
  • 构建人事管理系统前端：代码与架构详解 Tranyn.X
    本文还有配套的精品资源，点击获取简介：人事管理系统前端代码是实现用户界面展示与交互的关键部分，它不仅需要依赖流行的前端框架，还涉及到项目文件结构、模块化开发、状态与路由管理、响应式设计、后端API接口交互、安全策略以及测试与持续集成/部署的实践。本篇文章将详细介绍如何构建一个高效且安全的人事管理系统前端架构。1.人事管理系统前端代码概述1.1前端开发角色与职责在构建人事管理系统时，前端开发者扮演着
  • CSS详解：特性、选择器与优先级 超级土豆粉 前端技术沉淀指南css前端
    CSS详解：特性、选择器与优先级目录CSS详解：特性、选择器与优先级一、CSS的核心特性1.层叠性（Cascading）2.继承性（Inheritance）3.优先级（Specificity）4.响应式设计5.动画与过渡二、CSS选择器详解1.基本选择器2.组合选择器3.属性选择器4.伪类选择器5.伪元素选择器三、CSS优先级（Specificity）详解1.优先级计算规则例子2.!importa
  • PWA 的背景以及实现方式 超级土豆粉 前端技术沉淀指南前端webapp
    PWA的背景以及实现方式目录PWA的背景以及实现方式一、PWA的背景二、PWA的核心特性三、PWA的实现方式1.添加WebAppManifest2.注册ServiceWorker3.使用HTTPS4.响应式设计5.支持推送通知（可选）四、结语一、PWA的背景随着移动互联网的普及，用户对应用体验的要求越来越高。传统的Web应用虽然具备跨平台、无需安装、易于更新等优点，但在性能、离线能力、推送通知等方
  • jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
    XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
  • mysql 分区查询优化 annan211 java分区优化mysql
    分区查询优化 引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。 所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。 可以通过查看explain执行计划，是否携带 partitions
  • MYSQL存储过程中使用游标 chicony Mysql存储过程
    DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
  • mysql 和 sqlite 区别 Array_06 sqlite
    转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
  • pinyin4j使用 oloz pinyin4j
    首先需要pinyin4j的jar包支持；jar包已上传至附件内 方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
  • 微博发送私信 随意而生 微博
    在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据， 让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
  • jsp 香水浓 jsp
    JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后
  • 在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
    在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号   最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx   现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
  • android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
    我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去 1 2 3
  • jdk-6u26-linux-x64.bin 安装 baalwolf linux
    1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
  • MongoDB经典面试题集锦 BigBird2012 mongodb
    1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。 关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 在考虑数据库的成熟
  • JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScriptPromise
            Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。         在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
  • [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
    ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
  • 【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
    隐式转换存在的必要性，   在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下：   val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
  • Android JSON数据的解析与封装小Demo ronin47
    转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor
  • [设计]字体创意设计方法谈 brotherlamp UIui自学ui视频ui教程ui资料
      从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
  • 单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java算法面试题
    import java.util.LinkedList; /* 单调队列 滑动窗口 单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减 题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
  • struts2处理一个form多个submit chiangfai struts2
    web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
  • shell查找上个月，陷阱及野路子 chenchao051 shell
    date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号
  • mysql导出数据中文乱码问题 daizj mysql中文乱码导数据
    解决mysql导入导出数据乱码问题方法： １、进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
  • SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHPsmartysae
      对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为：   01 $path 
  • 《教父》系列台词 dcj3sjt126com
    Your love is also your weak point. 你的所爱同时也是你的弱点。   If anything in this life is certain, if history has taught us anything, it is that you can kill anyone.   不顾家的人永远不可能成为一个真正的男人。 &
  • mongodb安装与使用 dyy_gusi mongo
    一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun
  • Git排除目录 geeksun git
    在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。   有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1.  针对单一工程排除文件 这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
  • Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
    转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。   2) 设置脚本文件的权限 $ sudo chmod 755
  • 第八章 流量复制/AB测试/协程 jinnianshilongnian nginxluacoroutine
    流量复制 在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
  • 电商系统商品表设计 lkl
    DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
  • 修改phpMyAdmin导入SQL文件的大小限制 pda158 sqlmysql
    　用phpMyAdmin导入mysql数据库时，我的10M的 数据库不能导入，提示mysql数据库最大只能导入2M。 　　 phpMyAdmin数据库导入出错： 　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
  • Tomcat性能调优方案 Sobfist apachejvmtomcat应用服务器
    一、操作系统调优 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 【适用场景】 任何项目。 二、Java虚拟机调优 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
  • SQLServer学习笔记 vipbooks 数据结构xml
    1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他