chen106106
chen106106

responsive designs


响应式布局主要用来当遇到不同屏幕大小的时候，我们的网页还可以以比较友好的方式显示给用户。主要有4中类型的屏幕，
 
1、宽屏的台式机
 
2、便携式的笔记本
 
3、平板电脑
 
4、智能手机
 
 
下图是不同设备中同一个网页的不同显示效果


 
 
响应式布局主要用到的css中media query，它可以判断当前屏幕的尺寸。
 
有关css media query  谷歌一下就可以找到详细资料
 
其他的就是根据不同屏幕宽度来实现我们的布局了。
 
常见的有导航栏的响应式布局，表格的自使用，图像的自适用，网格多列布局的自适应等。
 
下面我们来演示一个机遇多列布局的响应式布局。
 
当屏幕尺寸在 10em（160px）<width <42em（672px）时候，我们让第一列独占一行，
 
其他2列浮动，占据一行，同时设置它的字体大小和颜色（区分）
 
42em(672px0 )  <width < 55em(880px)
 
3列都浮动，同时宽度按照 2:1:1来分配
 
width > 75em (1200px)
 
3列都浮动，但我们把字体的大小设置大一点。
 
 
 

 

 

 
从上面的3副图片可以看出来，我们页面确实可以根据不同的屏幕大小来自使用显示内容了。
 
 
  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>grid responsive layout</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		
		<style>

		/* 1st breakpoint - Float B and C, leave A full width on top */
		/* 1em=16px */
		@media all and (max-width: 42em) and (min-width: 10em)) {  /*672px*/
			.rwd-example {
				overflow: hidden; /* Use this or a "clearfix" to give the container height */
			}
			.rwd-example .ui-body {
			   min-height: 14em;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 49.95%;
			}
			.rwd-example .ui-body {
			  font-size: 0.8em;
			  color: red;
			}
			
		}
	
		/* 2nd breakpoint - Float all, 50/25/25 */
		@media all and (min-width: 55em) { /*880px*/
			.rwd-example .ui-body {
			   min-height: 18em;
			}
			
			.rwd-example .ui-body {
			  font-size: 100%;
			  color: green;
			}
			.rwd-example .ui-block-a,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 50%;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 25%;
			}
			
		}
	
		/* 3rd breakpoint - Bump up font size at very wide screens */
		@media all and (min-width: 75em) { /*1200px*/
			.rwd-example .ui-body {
			  font-size: 125%;
			  color: blue;
			}
			.rwd-example .ui-block-a,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 50%;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 25%;
			}
		}
		
		</style>
	</head>
	
	<body>
		<!-- data-role a:黑色 b：蓝色 c：白色 d:灰色  e：黄色 -->
		<div data-role="page">
			<div data-role="header">
				<h4>grid responsive layout学习</h4></div>
			<div data-role="content">
				
				<div class="rwd-example">
					<!-- Lead story block -->
					<div class="ui-block-a">
						<div class="ui-body ui-body-d">
							<h2>Apple schedules 'iPad Mini' event for October 23</h2>
							<p>One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".</p>
						</div>
					</div>
					<!-- secondary story block #1 -->
					<div class="ui-block-b">
						<div class="ui-body ui-body-d">
							<h4>Microsoft Surface tablet goes on sale for $499</h4>
							<p>The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.</p>
						</div>
					</div>
					<!-- secondary story block #2 -->
					<div class="ui-block-c">
						<div class="ui-body ui-body-d">
							<h4>AOL unveils Alto, an email service that syncs 5 accounts</h4>
							<p>AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service. </p>
						</div>
					</div>
</div><!-- /rwd-example -->
			</div>
		</div>
		
	</body>
</html>
 

你可能感兴趣的:(Responsive,css-media-query)

  • UniApp设备适配 uniapp
    UniApp是一个使用Vue.js开发跨平台应用的框架，它支持将同一套代码编译发布到多个平台，如H5、小程序、iOS、Android等。设备适配是UniApp开发中的关键环节，旨在确保应用在不同设备和操作系统上都能提供良好的用户体验。以下是UniApp设备适配的主要策略和技巧：1.使用自适应单位rpx（ResponsivePixel）：定义：rpx是UniApp提供的自适应单位，1rpx等于屏幕宽
  • React进阶之前端业务Hooks库（四） VillanelleS react.js前端前端框架
    前端业务Hooks库其他功能的hook针对domuseClickAwayuseDocumentVisibilityuseEventListeneruseMutationObserveruseResponsive结合组件库(antdesign,elementui)其他功能的hook针对dom合理的使用useLatest，useMemoizedFn，能够保证组件的更新是不发生不必要的变化的。后续在个人
  • 响应式布局：构建适应多设备的现代网页 lina_mua css3前端csshtml
    1.引言1.1响应式布局的重要性随着移动设备的普及，用户访问网页的方式变得多样化。响应式布局（ResponsiveDesign）能够确保网站在不同设备（如桌面、平板、手机）上都能提供良好的用户体验。它不仅是现代前端开发的标配，也是提升用户满意度和SEO排名的重要手段。1.2本文的目标本文旨在深入探讨响应式布局的核心概念、实现技术、实用技巧以及最佳实践，帮助开发者构建适应多设备的现代网页。2.响应式
  • 响应式布局的设计规范 QTX18730 前端
    响应式设计（ResponsiveDesign）是一种web设计技术，旨在使网页在不同的设备和屏幕尺寸上都有良好的显示效果。响应式设计的核心思想是网页的布局能够根据设备的屏幕宽度、分辨率以及其他特性自动调整，使其适应桌面、平板和手机等各种设备，无论设备的显示尺寸如何变化，用户体验都能保持一致。响应式设计的关键特点流式布局（FluidLayouts）：使用相对单位（如百分比、vw/vh等）而非绝对单位
  • Web开发中的可专利性分析：透过一个案例学习 CodePatentMaster 前端学习
    Web开发工程师在创新过程中经常面临是否能申请专利并获得专利权的问题。本文通过一个详细的Web开发领域案例来阐释可专利性的分析过程。案例分析假设您是一名Web开发工程师，您开发了一种名为“动态响应式前端框架”（DynamicResponsiveFrontendFramework，DRFF）的新型前端框架。与传统前端框架相比，DRFF通过引入一种基于AI的组件化设计方法和实时数据流处理机制，显著提高
  • 教育定制开发中，如何通过代码实现多终端适配？ 万岳科技系统开发 外卖系统外卖系统开发小程序android开源
    随着移动设备、平板电脑和PC的普及，教育平台的用户往往使用多种终端访问系统。为了提供一致的用户体验，教育定制开发必须考虑多终端适配问题。本文将探讨在教育系统开发中，如何通过代码实现多终端适配，并提供一些核心技术和代码示例。一、多终端适配的关键技术响应式设计（ResponsiveDesign）使用CSS媒体查询，根据屏幕大小动态调整页面布局。前端框架支持借助前端框架如Bootstrap、Tailwi
  • 什么叫响应式网站 Katherine_He 产品设计
    了解更多信息：访问appbees1、什么叫响应式网页设计响应式Web设计(ResponsiveWebdesign)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关
  • 【CSS】什么是响应式设计？响应式设计的基本原理，怎么做 托尼比卡丘 #每天搞懂一道css题css前端
    在当今多设备、多屏幕尺寸的时代，网页设计面临着前所未有的挑战。传统的固定布局已无法满足用户在不同设备上浏览网页的需求，响应式设计（ResponsiveWebDesign）应运而生，成为网页设计的趋势和标准。本文将深入探讨响应式设计的概念、基本原理以及实现方法。一、什么是响应式设计？响应式网站设计是一种灵活且适应性强的网页设计方法，其核心理念是：“内容如水，适配容器”换句话说，网页内容会根据用户行为
  • Reactive 编程-Vert.x Flying_Fish_Xuan python开发语言
    Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性
  • Angular Dashboard 项目教程 郁俪晟Gertrude
    AngularDashboard项目教程angular-dashboardSkeletonforaresponsiveandfullycustomizableAngularDashboard项目地址:https://gitcode.com/gh_mirrors/an/angular-dashboard1.项目的目录结构及介绍angular-dashboard/├──e2e/│├──src/││├─
  • 响应式Web设计：纯HTML和CSS的实现技巧 丁爸 web前端html
    1.简介1.1.概述响应式Web设计（ResponsiveWebDesign，简称RWD）是一种网络页面设计布局，它能够根据访问设备的屏幕尺寸、分辨率和其他特性动态地调整布局、图片和内容，以提供更好的用户体验。这种设计理念的核心在于“移动优先”，即首先考虑移动用户的体验，然后再扩展到桌面和其他设备。1.2.主要特点响应式Web设计的主要特点包括：弹性布局：使用流体网格和灵活的图片来创建响应式布局，
  • 响应式Web设计：纯HTML和CSS的实现技巧 vvvae1234 html
    互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（ResponsiveWebDesign,RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。1
  • 响应式Web设计：纯HTML和CSS的实现技巧 Min_nna ai分析csshtml
    响应式Web设计（ResponsiveWebDesign，RWD）是指网站能够根据不同设备的屏幕大小和分辨率自动调整布局和样式，以提供良好的用户体验。使用纯HTML和CSS实现响应式设计的技巧包括以下几个方面：使用流式布局百分比宽度：使用百分比代替固定宽度，使元素根据父容器的宽度调整大小。.container{width:100%;}.column{width:50%;/*每列占父容器的50%*/
  • 响应式Web设计（Responsive Web Design, RWD） hong161688 前端
    响应式Web设计（ResponsiveWebDesign,RWD）是一种网页设计策略，旨在确保网站能够在不同设备和屏幕尺寸上提供良好且一致的用户体验。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（MediaQueries）、灵活的布局、流式布局、相对单位、图片和字体的响应式处理等技巧。以下将详细探讨这些技巧及其在响应式Web设计中的应用。一、媒体查询（MediaQueries）媒体查询
  • 响应式 Web 设计：纯 HTML 和 CSS 的实现技巧 清水白石008 csshtmlWEB设计html
    响应式Web设计：纯HTML和CSS的实现技巧引言随着移动设备的普及，响应式Web设计（ResponsiveWebDesign,RWD）已成为现代网页开发的标准。响应式设计的目标是使网页在不同设备上（如手机、平板和桌面）都能良好显示，提供一致的用户体验。本文将深入探讨如何使用纯HTML和CSS实现响应式Web设计，提供实用的技巧和示例，帮助开发者构建灵活且美观的网页。一、响应式设计的基本概念响应式
  • 响应式 Web 设计：纯 HTML 和 CSS 的实现技巧 柯迪 edgehtml
    在当今多设备、多屏幕的网络环境中，响应式Web设计（ResponsiveWebDesign,RWD）已经成为构建用户友好网站的标准方法。响应式设计确保网站能够在各种设备和屏幕尺寸上提供一致的用户体验。虽然现代开发者常用JavaScript和框架来实现响应式设计，但本文将重点介绍如何使用纯HTML和CSS技术来实现这一目标。1.使用灵活的布局流式布局是响应式设计的基础，它允许页面布局根据屏幕宽度动态
  • 响应式Web设计：纯HTML和CSS的实现技巧-1 Dingdangr html
    响应式Web设计（ResponsiveWebDesign,RWD）是一种旨在确保网站在不同设备和屏幕尺寸下都能良好运行的网页设计策略。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（MediaQueries）、灵活的布局、可伸缩的图片和字体、以及适当的视口设置等技术。1.视口元标签（ViewportMetaTag）在HTML文档的部分添加视口元标签是响应式设计的基础。这个标签告诉浏览器如
  • scrap_Web Scrap Scotch：节点方式 culiu9261 pythonjavascriptjavajs编程语言ViewUI
    scrapAlotofnewwebtechnologiesanddesignparadigmshaveemergedinthelastcoupleofyears.Someprogramminglanguagesarebeginningtogainincreasingpopularity.It'sverylikelytohaveheardaboutconceptslikeresponsivedesi
  • [UI5 常用控件] 06.Splitter，ResponsiveSplitter SAP峰※ UI5SAPUI5SAP
    文章目录前言1.Splitter1.1属性2.ResponsiveSplitter前言本章节记录常用控件Splitter,ResponsiveSplitter。主要功能是分割画面布局。其路径分别是：sap.ui.layout.Splittersap.ui.layout.ResponsiveSplitter1.Splitter1.1属性orientation：Horizontal，Vertical（
  • [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki qq_39196447 前端框架javascriptvue.js
    解决谷歌浏览器警告vue3项目中使用Element-Plus的表单form校验单的时候，浏览器出现以下警告：[Violation]Addednon-passiveeventlistenertoascroll-blocking‘touchmove’event.Considermarkingeventhandleras‘passive’tomakethepagemoreresponsive.安装插件n
  • 原生mobile-select选择器，选择时报错 Unable to preventDefault inside passive event listener invocation.原因，处理办法 七个隆咚锵
    import'default-passive-events'//这是为了解决警告[Violation]Addednon-passiveeventlistenertoascroll-blocking‘mousewheel’event.Considermarkingeventhandleras‘passive’tomakethepagemoreresponsive。default-passive-ev
  • 微信小程序-04 菜♕卷 微信小程序小程序
    rpx（responsivepixel）是微信小程序独有的，用来解决屏适配的尺寸单位。@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。定义在app.wxss中的样式为全局样式，作用于每一个页面。在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的
  • Create Responsive Web crack SEO-狼术 netDelphiCrackangular.js前端javascript
    CreateResponsiveWebcrackMDBootstrapProAngularv6.0.0seamlesslyintegrateswiththelatestAngularrelease.MDBootstrapProAngular(MDBProAngular)isaUIcomponentlibrarythatcombinesMaterialDesignaestheticswiththeB
  • #Uniapp：rpx 和 upx的区别 前端xiaolibao #Uniappuni-app
    在UniApp（由DCloud公司开发的跨平台移动应用开发框架）中，rpx和upx是两种用于响应式布局单位。rpx(ResponsivePixel):rpx是一种可以根据屏幕宽度进行自适应转换的单位。1rpx等于设备宽度的1/750。也就是说，在一个宽度为750px的设计稿上，如果一个元素的宽度是100px，那么在UniApp中应该设置为100rpx。使用rpx可以让开发者更方便地实现不同屏幕尺寸
  • 小程序 样式 WXSS 过去日记 小程序小程序
    文章目录样式WXSS尺⼨单位样式导⼊选择器⼩程序中使⽤less样式WXSSWXSS(WeiXinStyleSheets)是⼀套样式语⾔，⽤于描述WXML的组件样式。与CSS相⽐，WXSS扩展的特性有：响应式⻓度单位rpx样式导⼊尺⼨单位rpx（responsivepixel）:可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则
  • 2019-03-26 inertia LachesisQ
    词：inertiainertial/inerially=inactivity,apathy,immobility,lethargy,listlessness,passivity,sloth,unresponsiveness英英释义：whennoonewantstodoanythingtochangeasituation例句：Hestayedwherehewas,notbecausehegotunl
  • echarts饼图自定义formatter 苏苏哇哈哈 gitjs前端echartsjs
    1.实现效果2.实现原理echarts官网：https://echarts.apache.org/zh/index.html3.完整代码https://gitee.com/susuhhhhhh/responsive-web-page4.主要代码varmyChart=echarts.init(document.getElementById('main3'));varoption={title:{te
  • #Uniapp：upx 和 rpx使用区分 & 设计稿计算规则 前端xiaolibao #Uniappuni-app
    upx和rpx区别upx：upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。rpx：rpx是微信小程序中使用的长度单位，全称为responsivepixel（响应式像素）。同样地，1rpx也代表设备独立像素，在不同分辨率的手机屏
  • 小程序系列--6.WXSS 模板样式 小哥码农 小程序小程序
    一.什么是WXSSWXSS(WeiXinStyleSheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。1.WXSS和CSS的关系二、rpx1.什么是rpx尺寸单位rpx（responsivepixel）是微信小程序独有的，用来解决屏适配的尺寸单位。2.rpx的实现原理3.rpx与px之间的单位换算*三、样式导入1.@import的语法格式四、全局样式和局部样式1.全
  • Defensive owl xiaoluban55开
    DefensiveOwlisacasualentertainmentgamethattestsyourresponsivenessInmanycaves,thereareowls.Theyarenot"Kindness"andwillattackyou.Whenowlsappear,youmustquicklyclickonthemandknockthemback,otherwiseyouwill
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他