昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多层面的角色,包括交互设计 师,视觉设计师,前端工程师,后台开发工程师。
交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!既然响应式网页设计牵涉到了这么多的方方面面,那我们又该如何去实现这种页面呢?对此我也特意收集了一些响应式网页的实现方法原理,在马海祥博客上跟大家分享一下:
首先我们应该遵循移动优先原则,交互和设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。
一、响应式布局
如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?对此,马海祥觉的我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:
那么我们具体要怎么做呢?
1、Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
通过快捷方式打开时全屏显示
隐藏状态栏
iPhone会将看起来像电话号码的数字添加电话连接,应当关闭
2、使用Media Queries适配对应样式
常用于布局的CSS Media Queries有以下几种:
设备类型(media type):
all所有设备; screen 电脑显示器; print打印用纸或打印预览视图; handheld便携设备; tv电视机类型的设备; speech语意和音频盒成器; braille盲人用点字法触觉回馈设备; embossed盲文打印机; projection各种投影设备; tty使用固定密度字母栅格的媒介,比如电传打字机和终端。
设备特性(media feature):
width浏览器宽度; height浏览器高度; device-width设备屏幕分辨率的宽度值; device-height设备屏幕分辨率的高度值; orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape; aspect-ratio比例值,浏览器的纵横比; device-aspect-ratio比例值,屏幕的纵横比。
例子:
/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ ... } } /* for 320px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:320px){ selector{ ... } } /* for 480 px width screen */ @media only screen (min-device-width:321px)and (max-device-width:480px){ selector{ ... } }
适用于布局的Media Queries,这里在马海祥博客上我们就不再做详述,有兴趣的话,可通过官方文档进一步了解。
3、表格(table)的响应式处理
那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法:
(1)、隐藏不重要数据列
处理前:
(点击查看大图)
处理后:
实现方法代码:
@media only screen and (max-width: 800px) { table td:nth-child(2), table th:nth-child(2) {display: none;} } @media only screen and (max-width: 640px) { table td:nth-child(4), table th:nth-child(4), table td:nth-child(7), table th:nth-child(7), table td:nth-child(8), th:nth-child(8){display: none;} }
以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的,所以对于这种方法马海祥并不推荐。
(2)、多列横向变2列纵向
处理前:
处理后:
实现方法:定位隐藏,变块元素,并绑定对应 列名,然后用伪元素的content:attr(data-th)实现 :
(3)、固定首列,剩余列横向滚动
处理前:
处理后:
实现原理代码:
thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;}
二、响应式内容
1、响应式图片
带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。
处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。
解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签,因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。
是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:
Accessible text
注: source: 一个图片源; media: 媒体查询,用于适配屏幕尺寸; srcset: 图片链接,1x适应普通屏,2x适应高清屏; : 当浏览器不支持脚本时的一个替代方案; : 初始图片;另外还有一个无障碍文本,类似 的alt属性。
虽然目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill
其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片,逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。
当然,在未来的CSS Image Level 4中已经实现了响应式图片的原生语法:image-set
= image-set([ , ]* [ | ]) = [ | ]
那么我们的响应式图片可以这样重写了
background-image:url(default.jpg); /* 普通幕 */ background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。
当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探。
2、高分辨率(DPI)下的响应式处理
(1)、SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美。
(2)、Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。
(3)、-webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)。
JS检测:var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ (min-resolution: 2dppx), /* The standard way */ (min-resolution: 192dpi) /* dppx fallback */
3、高分辨率下的1px border
由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。
在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { button { border:none; padding:0 16px; box-shadow: inset 0 0 1px #000, inset 0 1px 0 #75c2f8, 0 1px 1px -1px rgba(0, 0, 0, .5); } }
留给我们的思考
⊕响应式不只是技术的实现,它更像是一种对于设计的全新思维模式 ⊕浏览的体验短期内还无法超越原生应用 ⊕左手操作习惯的交互 ⊕Webapp的消息推送 ⊕调用本地文件系统的能力弱 ⊕响应式图片的解决方案 ⊕对PC事件的兼容 ⊕WebAPP页面体积的响应式适配 ⊕代码实现和内容可维护性之间的权衡 ⊕控制设计开发成本
本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/278.html,注明出处;否则,禁止转载;谢谢配合!
转载于:https://www.cnblogs.com/520yang/articles/4435272.html
你可能感兴趣的:(响应式网页布局的实现方法原理)
浅谈我理解的,bug如何定位前后端问题
追星徐小粉
软件测试 定位前后端问题 linux nginx
测试,如何定位前后端bug?首先需要清楚知道数据的传输流程:用户在前端页面操作,如点击某个功能,页面携带数据进行请求,访问具体功能接口,由后端服务执行该接口相应的业务逻辑,如涉及数据,后端从数据库取相关信息,并组装数据返回给前端,前端页面进行渲染和展示对应的页面和数据。1接口分析法:抓包或浏览器F12,选择NETWORK网络,选择XHR,JS,WS,Manifest,Other,过滤一些其他内容,
Sass,Scss,Less的区别
_会飞的肥牛
笔记 sass less
一.Sass和Scss区别Scss是Sass的升级版,他用{}代替了缩进更符合书写习惯.homecolor:#42b983.home{color:#42b983;}二.Sass/Scss和Less区别1.编译环境不同Sass是在服务端处理的,以前是Ruby,现在是Dart-Sass或Node-Sass,而Less是需要引入less.js来处理Less代码输出CSS到浏览器,也可以在开发服务器将Le
安全运维:入侵检测与防御实战指南
Echo_Wish
让你快速入坑运维 运维探秘 安全 运维
在当今的互联网时代,网络安全已经成为企业和个人都必须重视的关键问题之一。黑客攻击、恶意软件、数据泄露等威胁不断增加,而入侵检测和防御技术是保障信息系统安全的核心手段。本文将围绕如何通过入侵检测(IntrusionDetectionSystem,IDS)和防御技术来保护网络环境展开,结合实际代码示例,详细讲解实现原理与防御方案。1.什么是入侵检测与防御?入侵检测系统(IDS)是监控计算机网络或系统活
yarn serve编译运行出错 error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css
weixin_45508767
开发经验 前端 vue.js css 前端
yarnserve编译运行出错errorin./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css如下图:解决方案:使用postcssOptions:{}方法包裹住plugins,如下:module.exports={css:{loaderOptions:{postcss:{postcssOptions:{plugins:
【微服务】服务网关----Gateway
SoftwareDevOps
微服务 gateway java 服务网关 网关限流
服务网关----Gateway1、前言2、网关简介3、Gateway简介4、Gateway快速入门4.1基础版4.2增强版(引入nacos)4.3简写版5、Gateway核心架构5.1路由(Route)5.2执行流程6、实现网关限流7、总结1、前言上篇文章讲解了如何实现服务容错,这篇就介绍下,服务网关—Gateway。在本篇文章中,你将了解到什么是服务网关?什么是Gateway?如何实现Gatew
【RabbitMQ 消息丢失常见情况分析】
高飞的Leo
市场问题处理总结 rabbitmq 分布式
RabbitMQ消息丢失分析:常见场景与解决策略RabbitMQ作为一种流行的消息队列中间件,广泛应用于各类分布式系统中。它通过发布/订阅模式解耦了生产者和消费者,提高了系统的可扩展性和可靠性。然而,在实际应用中,消息丢失仍然是一个亟待关注的问题。本文将探讨导致RabbitMQ消息丢失的几种常见场景,尤其是Exchange没有绑定Queue的情况,并提供相应的解决策略。1.RabbitMQ工作原理
半导体、芯片、人工智能、智能驾驶汽车的趋势
不爱原创的Yoga
人工智能 汽车
1.市场增长与需求汽车半导体市场:预计到2025年,中国汽车半导体市场仍将保持稳健增长态势,AI和能源将成为未来最重要的两大变革因素。2023年中国汽车电子芯片行业市场规模约为820.8亿元,预计2024年有望增至905.4亿元左右。随着新能源汽车和智能化的快速发展,一些新的半导体技术在中国汽车领域迅速应用,如集中式架构和高性能处理器需求正日益增加。AI芯片市场:随着AI技术的不断普及和应用场景的
Multi-Head Latent Attention: Boosting Inference Efficiency
连理o
LLM
ContentsIntroductionMethodLow-RankKey-ValueJointCompressionDecoupledRotaryPositionEmbeddingReferencesIntroduction作者提出Multi-headLatentAttention(MLA),通过将KV压缩为CompressedLatentKV,在减小KVcache的同时保持模型精度Method
Runway 推出全新 AI 图像生成器 Frames
百态老人
人工智能 计算机视觉
Runway全新图像生成器Frames简介著名的文生视频模型平台Runway发布了全新的AI图像生成器——Frames。这一模型于2024-11-27被发布出来,为图像生成领域带来了新的活力与可能。与传统的图像生成模型相比,Frames有着明显的独特性。传统的图像生成模型,例如DALL-E与StableDiffusion等,它们虽然能够生成高质量的图像,但局限性也较为明显。具体体现在维持风格的一致
Minimax 开源的 4 百万超长上下文模型
百态老人
人工智能 大数据 笔记
MiniMax开源4百万超长上下文模型MiniMax开源模型概述2025年1月15日,MiniMax发布并开源了MiniMax-01全新系列模型,这一举措在人工智能领域引发了广泛关注。该系列包含基础语言大模型MiniMax-Text-01和视觉多模态大模型MiniMax-VL-01。MiniMax作为大模型六小强(或六小虎)企业之一,其推出的这一系列模型有着诸多独特之处。这一系列模型的开源是Min
多头潜在注意力(MLA)是怎么来的,什么原理,能用简单的示例解释么
百态老人
学习
多头潜在注意力(Multi-HeadLatentAttention,简称MLA)是一种改进的注意力机制,旨在提高自然语言处理(NLP)模型的推理效率和性能。其核心思想是通过低秩联合压缩键(Key)和值(Value),减少推理过程中所需的内存和计算资源,从而实现更高效的处理。MLA的原理在传统的多头注意力机制(MHA)中,每个输入token的键和值需要被缓存,这导致了巨大的内存开销。具体来说,对于每
DeepSeek-V2
百态老人
学习
DeepSeek-V2是由幻方量化旗下的AI公司DeepSeek发布的第二代MoE(Mixture-of-Experts)大模型,具有显著的性能和成本优势。以下是关于DeepSeek-V2的详细分析:性能表现:DeepSeek-V2是一个参数量为2360亿的MoE模型,其性能接近GPT-4Turbo,并在多个基准测试中表现优异,如AlignBench、MT-Bench等,超越了GPT-4,与GPT
无人驾驶公交车落地情况
百态老人
笔记
无人驾驶公交车的最新进展无人驾驶公交车作为智能交通系统的重要组成部分,近年来在中国多个城市逐步推进示范运营。最近的进展包括:绵阳市无人驾驶公交车示范运营:2024年6月28日,绵阳市启动了首批自动驾驶车辆示范运营测试,包括19辆无人驾驶公交车。这些公交车配备了安全员,并规划了4条试运营线路,覆盖科技城新区直管区全域。试运营期间,市民可以免费乘坐体验无人驾驶公交车。深圳无人驾驶公交车:深圳市在201
如何区分前后端bug?
weixin_38648367
功能测试
写在前面的话:关于如何区分前后端bug的问题,网上已经有很多详细的判断方法了。关于遇到bug如何进行初步判断,这里给出简单的步骤,对于初学者来说,按照步骤一步步判断、积累经验也未尝不可。欢迎大家评论区讨论交流~~~前后端BUG各有的特点前端BUG:界面相关、布局相关、兼容性相关、交互相关。后端BUG:业务逻辑相关、性能相关、数据相关、安全性相关。1、抓包,web或者APP注意使用、设置好代理,保证
vue中对style样式的区别
星辰啊大海7857
CSS布局 javascript
如果想要启用scss和sass,需要设置lang属性。使用less语法使用sass语法两种语法的区别(大部分摘自官网文档)lesssass(含两种语法格式)语法说明SCSS语法格式现在常用,扩展名一般为.scssSass语法格式早期使用的,使用“缩进”代替“花括号”表示属性属于某个选择器,用“换行”代替“分号”分隔属性,很多人认为这样做比SCSS更容易阅读,书写也更快速。拓展名是.sass1变量@
腾讯实时股票数据接口怎么获取行情?
百态老人
腾讯云 云计算
获取腾讯实时股票数据接口的方法如下:首先注册成为腾讯云用户,并创建一个API密钥(SecretId和SecretKey);然后使用HTTPS协议调用腾讯云提供的接口,可以通过发送HTTPGET请求获取指定股票代码的实时行情数据;通过解析返回的JSON格式数据,即可获取对应股票的当前股价、涨跌幅等信息。需要注意的是,使用腾讯云提供的股票行情接口需要支付一定的服务费用。另外,使用该接口前需要仔细了解其
python cursor游标重置位置scroll_Python中使用MySQLdb连接MySQL ...
贺开
python
‘’‘#选择数据库conn.select_db('python');提交操作:conn.commit()回滚操作:conn.rollback()获取最近查询表的字段个数:conn.field_count上次查询或更新所发生行数:cursor.rowcountexcute(sql,单挑数据元组)、executemany(sql,序列)插入一条记录:executevalue=[1,"inserted?
程序员创业公司的技术栈选择与性能优化
AI天才研究院
ChatGPT AI大模型企业级应用开发实战 大数据AI人工智能 大厂Offer收割机 面试题 简历 程序员读书 硅基计算 碳基计算 认知计算 生物计算 深度学习 神经网络 大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
《程序员创业公司的技术栈选择与性能优化》概述本文旨在探讨程序员创业公司在选择技术栈和进行性能优化方面的策略与实践。随着技术的不断进步和市场的快速变化,技术栈的选择和优化成为创业公司成功的关键因素。正确的技术栈选择不仅能够提升系统的性能和可扩展性,还能降低开发成本和维护难度。关键词技术栈选择性能优化创业公司云计算数据库微服务人工智能区块链边缘计算摘要本文首先分析了技术栈选择的重要性以及创业公司在技术
AI人工智能深度学习算法:高并发场景下深度学习代理的性能调优
AI天才研究院
计算 AI大模型企业级应用开发实战 ChatGPT 计算科学 神经计算 深度学习 神经网络 大数据 人工智能 大型语言模型 AI AGI LLM Java Python 架构设计 Agent RPA
1.背景介绍1.1深度学习代理的兴起近年来,随着人工智能技术的飞速发展,深度学习在各个领域都取得了显著的成果。特别是在自然语言处理、图像识别、语音识别等领域,深度学习模型的性能已经超越了传统方法。为了更好地将深度学习技术应用于实际场景,深度学习代理应运而生。深度学习代理是一种将深度学习模型封装起来,并提供对外接口的服务。它可以接收来自客户端的请求,将请求数据输入到深度学习模型中进行推理,并将推理结
logback-spring.xml
Evan_o_O
logback spring xml
${appName}-->debug${LOG_PATTERN}UTF-8${log.path}/${appName}.log${LOG_PATTERN}UTF-8${log.path}/log_debug.log,然后将昨天的日志归档到下面的文件中-->${log.path}/${appName}-%d{yyyy-MM-dd-HH}-%i.log100MB1420GBdebugACCEPTDEN
深入解析:数据库连接池的必要性与优化策略
rain1309
数据库 数据库 java 架构
引言在现代的应用程序架构中,数据库连接池已成为提升性能和资源管理的关键组件。想象一下,如果没有连接池,每次用户请求都需建立新的数据库连接,这将是多么低效且资源浪费的场景。本文将深入探讨数据库连接池的必要性,并提供优化策略以确保你的应用能够高效、稳定地运行。数据库连接池的基本概念数据库连接池是一种创建和管理数据库连接的机制,它允许多个客户端共享一个固定数量的数据库连接,而不是为每个客户端请求创建新的
分库分表实践:单 KEY 业务场景
rain1309
数据库 mysql 数据库 架构
前言随着业务的快速增长和数据量的爆炸性增加,传统的单体数据库架构已经难以满足性能和扩展性的需求。为了解决这一问题,分库分表技术应运而生,成为支撑大规模业务的重要手段。分库分表方式中间件Cobar:阿里巴巴开发的分库分表中间件,支持自动分片和路由TDDL(TencentDatabaseLinker):腾讯开发的分库分表中间件,支持多种分片策略Atlas:由LinkedIn开发的分库分表中间件,支持自
scrapy学习之爬虫练习平台爬取
LLLibra146
爬虫 python
本文章首发于个人博客,链接为:https://blog.d77.xyz/archives/35dbd7c9.html前言为了练习Scrapy,找了一个爬虫练习平台,网址为:https://scrape.center/,目前爬取了前十个比较简单的网站,在此感谢平台作者提供的练习平台。环境搭建开始爬取前,首先要先把环境搭建起来,Pycharm新建项目learnscrapy和对应的虚拟环境,安装好Scr
从0到1打造企业AI知识库-课程目录
MaxCode-1
人工智能 AIGC 知识图谱 Langchain Xinference
课程名称:「从0到1打造企业AI知识库:实用指南与生产落地」课程目录第一章:AI企业知识库的前景与价值1.企业知识库的概念与意义1.1什么是企业知识库?-企业知识库的核心组成-企业知识库的类型1.2企业知识库如何赋能内部协作与创新。2.AI在知识库中的作用AI赋能的核心技术:NLP、知识图谱、大模型。AI知识库的未来趋势与行业案例。第二章:搭建企业知识库的整体规划3.从需求分析到方案设计识别业务场
PyQt5页面跳转闪退问题解决
丹123
开发语言 python qt5
逻辑描述:点击窗体login中的查询按钮,会出现sele窗体问题描述:点击查询之后,sele窗体闪退,刚出现就退出问题分析:直接在sele窗体中写main函数单独调用,是可以显示的,说明还是在调用过程中出现问题解决办法:在login中实例sele对象时,需要加self出现问题前的代码如下:注意defselect_act中的调用login.pyclassUi_mainWindow(object):d
数据处理 -- CRC(循环冗余校验)技术文档
sz66cm
网络 linux
CRC(循环冗余校验)技术文档整理CRC32(CyclicRedundancyCheck32-bit)是一种常见的校验和算法,广泛应用于网络通信、文件校验等领域。本文将围绕CRC32的核心思想、具体实现,并结合常见标准、反射(bit-reverse)过程的影响等方面进行介绍。一、CRC32的核心思想CRC32利用一种基于二进制多项式的算法,将输入数据视为一个大整数,并通过一个固定的生成多项式进行模
如何学习爬虫技术:从入门到实践的全面指南
CodeJourney.
学习 爬虫
一、引言在当今数字化时代,网络上的数据量呈爆炸式增长,能够高效地获取和处理这些数据变得愈发重要。爬虫技术作为一种从网页中自动提取信息的手段,在各个领域都有着广泛的应用,无论是数据分析、机器学习的数据集构建,还是市场调研、价格监测等商业场景,掌握爬虫技术都能为你打开一扇获取丰富信息资源的大门。然而,对于初学者来说,面对琳琅满目的工具和复杂的网络环境,可能会感到无从下手。本文将带你逐步深入了解爬虫技术
数据库中表的创建和插入数据
℡52Hz★
数据库 database
首先我们先创建表,可使用createtable命令,先来了解一下其中的一些小的知识点吧。col_name:字段名,type:声明字段的数据类型,notnull或null:字段是否可以为空值,auto_increment:设置自增属性,只有整型类型才能使用此属性,primary:字段指定主键约束等还有很多,这些都是一些常出现的字段属性,下面是创建表的一些具体代码。然后我们在表中插入内容,使用inse
在MATLAB中,梯度gradient计算方法的理解
qq_43272922
matlab 算法 人工智能
以矩阵为例:[FX,FY]=gradient(F)在MATLAT中,grandient函数计算方法:1)FX方向(或行向量):(1)第1列=第2列-第1列(2)中间第j列=(第j+1列-第j-1列)/2(3)第n列=第n列-第n-1列。2)FY方向(或列向量):(1)第1行=第2行-第1行(2)中间第i行=(第i+1行-第i-1行)/2(3)第m行=第m行-
【前端】包管理器:npm、Yarn 和 pnpm 的全面比较
帅比九日
踩过的坑 前端 npm node.js
前端开发中的包管理器:npm、Yarn和pnpm的全面比较在现代前端开发中,包管理器是开发者必不可少的工具。它们不仅能帮我们管理项目的依赖,还能极大地提高开发效率。本文将详细介绍三种主流的前端包管理器:npm、Yarn和pnpm,探讨它们的特点、优缺点以及它们之间的关系和对比。npm(NodePackageManager)简介npm是Node.js的默认包管理器,由Node.js官方维护。自201
深入浅出Java Annotation(元注解和自定义注解)
Josh_Persistence
Java Annotation 元注解 自定义注解
一、基本概述
Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metadata)与程序元素(类、方法、成员变量等)进行关联。
更通俗的意思是为程序的元素(类、方法、成员变量)加上更直观更明了的说明,这些说明信息是与程序的业务逻辑无关,并且是供指定的工具或
mysql优化特定类型的查询
annan211
java 工作 mysql
本节所介绍的查询优化的技巧都是和特定版本相关的,所以对于未来mysql的版本未必适用。
1 优化count查询
对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看
真正的count()函数的作用到底是什么。
count()是一个特殊的函数,有两种非常不同的作用,他可以统计某个列值的数量,也可以统计行数。
在统
MAC下安装多版本JDK和切换几种方式
棋子chessman
jdk
环境:
MAC AIR,OS X 10.10,64位
历史:
过去 Mac 上的 Java 都是由 Apple 自己提供,只支持到 Java 6,并且OS X 10.7 开始系统并不自带(而是可选安装)(原自带的是1.6)。
后来 Apple 加入 OpenJDK 继续支持 Java 6,而 Java 7 将由 Oracle 负责提供。
在终端中输入jav
javaScript (1)
Array_06
JavaScript java 浏览器
JavaScript
1、运算符
运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=)、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
国内顶级代码分享网站
袁潇含
java jdk oracle .net PHP
现在国内很多开源网站感觉都是为了利益而做的
当然利益是肯定的,否则谁也不会免费的去做网站
&
Elasticsearch、MongoDB和Hadoop比较
随意而生
mongodb hadoop 搜索引擎
IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性,避免落大部队太远,我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎,它们存储着JSON文档,MongoDB存着JSON文档,或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
mac os 系统科研软件总结
张亚雄
mac os
1.1 Microsoft Office for Mac 2011
大客户版,自行搜索。
1.2 Latex (MacTex):
系统环境:https://tug.org/mactex/
&nb
Maven实战(四)生命周期
AdyZhang
maven
1. 三套生命周期 Maven拥有三套相互独立的生命周期,它们分别为clean,default和site。 每个生命周期包含一些阶段,这些阶段是有顺序的,并且后面的阶段依赖于前面的阶段,用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例,它包含的阶段有pre-clean, clean 和 post
Linux下Jenkins迁移
aijuans
Jenkins
1. 将Jenkins程序目录copy过去 源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面 tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
request.getInputStream()只能获取一次的问题
ayaoxinchao
request Inputstream
问题:在使用HTTP协议实现应用间接口通信时,服务端读取客户端请求过来的数据,会用到request.getInputStream(),第一次读取的时候可以读取到数据,但是接下来的读取操作都读取不到数据
原因: 1. 一个InputStream对象在被读取完成后,将无法被再次读取,始终返回-1; 2. InputStream并没有实现reset方法(可以重
数据库SQL优化大总结之 百万级数据库优化方案
BigBird2012
SQL优化
网上关于SQL优化的教程很多,但是比较杂乱。近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充。
这篇文章我花费了大量的时间查找资料、修改、排版,希望大家阅读之后,感觉好的话推荐给更多的人,让更多的人看到、纠正以及补充。
1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。
2.应尽量避免在 where
jsonObject的使用
bijian1013
java json
在项目中难免会用java处理json格式的数据,因此封装了一个JSONUtil工具类。
JSONUtil.java
package com.bijian.json.study;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
[Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration
bit1129
zookeeper
Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API,它包含了如下几个内部类
首先分析它的内部类,从WatchRegistration开始,为指定的znode path注册一个Watcher,
/**
* Register a watcher for a particular p
【Scala十三】Scala核心七:部分应用函数
bit1129
scala
何为部分应用函数?
Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
Tomcat Error listenerStart 终极大法
ronin47
tomcat
Tomcat报的错太含糊了,什么错都没报出来,只提示了Error listenerStart。为了调试,我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties,内容如下
Java代码
handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
不用加减符号实现加减法
BrokenDreams
实现
今天有群友发了一个问题,要求不用加减符号(包括负号)来实现加减法。
分析一下,先看最简单的情况,假设1+1,按二进制算的话结果是10,可以看到从右往左的第一位变为0,第二位由于进位变为1。
 
读《研磨设计模式》-代码笔记-状态模式-State
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
/*
当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类
状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况
把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化
如果在
CUDA程序block和thread超出硬件允许值时的异常
cherishLC
CUDA
调用CUDA的核函数时指定block 和 thread大小,该大小可以是dim3类型的(三维数组),只用一维时可以是usigned int型的。
以下程序验证了当block或thread大小超出硬件允许值时会产生异常!!!GPU根本不会执行运算!!!
所以验证结果的正确性很重要!!!
在VS中创建CUDA项目会有一个模板,里面有更详细的状态验证。
以下程序在K5000GPU上跑的。
诡异的超长时间GC问题定位
chenchao051
jvm cms GC hbase swap
HBase的GC策略采用PawNew+CMS, 这是大众化的配置,ParNew经常会出现停顿时间特别长的情况,有时候甚至长到令人发指的地步,例如请看如下日志:
2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
maven环境快速搭建
daizj
安装 mavne 环境配置
一 下载maven
安装maven之前,要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。
maven下载地址:http://maven.apache.org/download.html,目前最新的是这个apache-maven-3.2.5-bin.zip,然后解压在任意位置,最好地址中不要带中文字符,这个做java 的都知道,地址中出现中文会出现很多
PHP网站安全,避免PHP网站受到攻击的方法
dcj3sjt126com
PHP
对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
yii中给CGridView设置默认的排序根据时间倒序的方法
dcj3sjt126com
GridView
public function searchWithRelated() {
$criteria = new CDbCriteria;
$criteria->together = true; //without th
Java集合对象和数组对象的转换
dyy_gusi
java集合
在开发中,我们经常需要将集合对象(List,Set)转换为数组对象,或者将数组对象转换为集合对象。Java提供了相互转换的工具,但是我们使用的时候需要注意,不能乱用滥用。
1、数组对象转换为集合对象
最暴力的方式是new一个集合对象,然后遍历数组,依次将数组中的元素放入到新的集合中,但是这样做显然过
nginx同一主机部署多个应用
geeksun
nginx
近日有一需求,需要在一台主机上用nginx部署2个php应用,分别是wordpress和wiki,探索了半天,终于部署好了,下面把过程记录下来。
1. 在nginx下创建vhosts目录,用以放置vhost文件。
mkdir vhosts
2. 修改nginx.conf的配置, 在http节点增加下面内容设置,用来包含vhosts里的配置文件
#
ubuntu添加admin权限的用户账号
hongtoushizi
ubuntu useradd
ubuntu创建账号的方式通常用到两种:useradd 和adduser . 本人尝试了useradd方法,步骤如下:
1:useradd
使用useradd时,如果后面不加任何参数的话,如:sudo useradd sysadm 创建出来的用户将是默认的三无用户:无home directory ,无密码,无系统shell。
顾应该如下操作:
第五章 常用Lua开发库2-JSON库、编码转换、字符串处理
jinnianshilongnian
nginx lua
JSON库
在进行数据传输时JSON格式目前应用广泛,因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能;目前Lua也有几个JSON库,本人用过cjson、dkjson。其中cjson的语法严格(比如unicode \u0020\u7eaf),要求符合规范否则会解析失败(如\u002),而dkjson相对宽松,当然也可以通过修改cjson的源码来完成
Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解
yaerfeng1989
timer quartz 定时器
原创整理不易,转载请注明出处:Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解
代码下载地址:http://www.zuidaima.com/share/1772648445103104.htm
有两种流行Spring定时器配置:Java的Timer类和OpenSymphony的Quartz。
1.Java Timer定时
首先继承jav
Linux下df与du两个命令的差别?
pda158
linux
一、df显示文件系统的使用情况,与du比較,就是更全盘化。 最经常使用的就是 df -T,显示文件系统的使用情况并显示文件系统的类型。 举比例如以下: [root@localhost ~]# df -T Filesystem Type &n
[转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象
ctfzh
VO android sqlite 反射 Cursor
在写DAO层时,觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了,就写了一个工具类,用到了反射,可以把查询记录的值装到对应的VO里,也可以生成该VO的List。
使用时需要注意:
考虑到Android的性能问题,VO没有使用Setter和Getter,而是直接用public的属性。
表中的字段名需要和VO的属性名一样,要是不一样就得在查询的SQL中
该学习笔记用到的Employee表
vipbooks
oracle sql 工作
这是我在学习Oracle是用到的Employee表,在该笔记中用到的就是这张表,大家可以用它来学习和练习。
drop table Employee;
-- 员工信息表
create table Employee(
-- 员工编号
EmpNo number(3) primary key,
-- 姓