Naisu Xu
Naisu Xu

前端笔记：媒体查询和响应式布局

文章目录

  • 目的
  • 媒体查询
  • 响应式布局
  • 总结

目的

CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。这篇文章将对相关的功能做个说明。

媒体查询

媒体查询的语法非常简单，大概就是下面的样子：

@media 查询条件 {
    CSS-Code;
}
/* 查询条件可以是媒体类型或是媒体特性 */
/* 也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */

先看个简单的例子：

DOCTYPE html>
<html>
<head>
    <style>
        html,body {
            height: 100%;
        }
        /* 页面可见区域宽高比大于等于2/1 */
        @media (min-aspect-ratio: 2/1) {
            body {
                background-color: red;
            }
        }
        /* 页面可见区域宽高比大于等于1/1 小于2/1 */
        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
            body {
                background-color: yellow;
            }
        }
        /* 页面可见区域宽高比小于等于1/1 */
        @media (max-aspect-ratio: 1/1) {
            body {
                background-color: blue;
            }
        }
    style>
head>
<body>
body>
html>

前端笔记：媒体查询和响应式布局_第1张图片
媒体查询中的媒体类型主要是下面一些：

值 描述
all 适用于所有设备，默认值
print 适用于在打印预览模式下在屏幕上查看的分页材料和文档
screen 主要用于电脑屏幕，平板电脑，智能手机等
speech 主要用于屏幕阅读器等发声设备

媒体查询中的媒体特性非常多，这里列出一些常用的：

值 描述
orientation portrait：网页可见区域高度大于等于宽度
landscape：网页可见区域宽度大于高度
aspect-ratio 网页可见区域宽高比
min-aspect-ratio 网页可见区域最小宽高比
max-aspect-ratio 网页可见区域最大宽高比
width 网页可见区域宽度值
min-width 网页可见区域最小宽度值
max-width 网页可见区域最大宽度值

媒体查询使用时需要注意的是它是CSS的内容，后面的规则会覆盖前面的规则，所以书写的顺序还是需要注意的，不然有可能会出现问题，比如下面例子：

媒体查询语法上来说使用比较简单，更多内容可以参考下面链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

响应式布局

响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大，大多都是横屏显示的；手机的显示屏比较小，通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者，这时候就可以使用响应式布局了。对于小型的网页项目来说目前常见的响应式布局通常就是利用 媒体查询 结合 meta标签的viewport属性 来实现的，下面是个简单的例子：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        html,
        body {
            height: 100%;
        }
        body {
            display: flex;
            flex-wrap: wrap;
        }

        .header {
            width: 100%;
            height: 10%;
            background-color: salmon;
        }
        .nav {
            background-color: lightgreen;
        }
        .main {
            background-color: mediumturquoise;
        }
        .footer {
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        /* 在页面较宽时 */
        @media (min-width: 576px) {
            .nav {
                width: 20%;
                height: 80%;
            }
            .main {
                width: 80%;
                height: 80%;
            }
        }

        /* 在页面较窄时 */
        /* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */
        @media (max-width: 575px) {
            .nav {
                width: 100%;
                height: 10%;
            }
            .main {
                width: 100%;
                height: 70%;
            }
        }
    style>
head>
<body>
    <div class="header"> 标题栏 div>
    <div class="nav"> 导航栏 div>
    <div class="main"> 正文 div>
    <div class="footer"> 页脚 div>
body>
html>

总结

媒体查询和响应式布局总体来说是比较简单的，基本上就上面这些内容了，更多的还是要结合实际业务来应用。

你可能感兴趣的:(Web与JS相关,css,前端,布局,ui,设计)

  • 业务流逻辑如何搭建？为何橙武平台选用了 LogicFlow？ 橙武科技 低代码低代码
    前言在橙武低代码平台的架构设计中，“业务逻辑编排”并不是锦上添花的功能，而是决定平台扩展能力的根基之一。对内，它承担着流程驱动、条件分支、异步节点、子流程等任务；对外，它决定了平台能否真正支持多行业、多租户的复杂业务建模需求。我们评估过包括BPMN.js、ReactFlow、AntVG6、JointJS等多种图形与流程编排引擎，最终选择了滴滴开源的LogicFlow作为橙武平台的核心业务流程引擎。
  • 三好一改 2019年5月30日 1244期 8f9514241cc4
    1好：客户沟通今天对市场进行了拜访，与几个客户进行了交流，客户对产品有一定的兴趣，当谈到价格时，客户认为产品是可以的，品质也没问题，与整个市场的定位有差异，目前的运作有一定的难度，需要找准目标客户，才能达成有效的合作。跟另外的客户进行交流，客户同样表示对我们有兴趣，当报完价格后，客户也没有了回应，说明我们没有找对客户。同时也说明销售的方式需要调整，目前还是最基础的上门销售，需要对销售方法进行调整，
  • 基于橙武低代码平台的手工作坊成品交付流程管理方案 橙武科技 低代码AI人工智能ai低代码
    一、成品交付的管理需求在手工作坊的运营中，成品交付是整个生产流程中的一个关键环节，涉及到多个方面的管理：从原材料的使用记录到损耗比的计算，再到最终的成品质量检查和交付确认。高效的成品交付管理不仅能够提升工作效率，还能确保成品质量，避免原材料的浪费，减少运营成本。手工作坊通常依赖于兼职人员来完成生产任务，而这些兼职人员遍布各地，通过快递接受材料并交付成品。因此，成品交付管理的自动化与精细化至关重要。
  • 如何使用橙武低代码平台进行数据收集与分析：运营人员的月度报告生成实例 橙武科技 AIdeepseek低代码低代码人工智能ai
    一、背景与目标假设我们有一个运营人员，他的任务是每月收集和整理分公司的月度订单数据，包括：订单量：每个分公司在该月的订单总数。总金额：该月订单的总销售金额。退单量：该月退货的订单数。退单金额：退货订单的总金额。退单原因Top1：退单中最常见的原因。这些数据需要运营人员手动从各个分公司的系统中收集，然后整合成一个月度报告，分析并发现潜在问题，如哪些分公司订单量下降、哪些退单原因需要关注。通过橙武低代
  • 19、Java正则表达式与字符集详解 杠精协会主席 JavaNIO：革新I/O处理的新范式Java正则表达式Pattern
    Java正则表达式与字符集详解1.Java正则表达式相关类在JavaJ2SE1.4版本中，引入了一些期待已久的正则表达式类，下面为你详细介绍：-CharSequence：这是一个新的接口，由多个类实现，用于以抽象的方式描述字符序列。-Pattern：该类将正则表达式封装在一个不可变的对象实例中。可以通过编译表达式字符串来创建实例，同时还有一些静态实用方法用于一次性匹配。importjava.uti
  • Android NDK开发实战详解 大王算法 androidc++开发语言
    目录一、概念二、AndroidNDK的作用三、开发中需要注意的问题3.1、明确使用场景3.2、JNI（JavaNativeInterface）3.3、ABI（应用二进制接口）兼容性3.4、内存与线程安全3.5、调试与工具链3.6、安全风险3.7、构建配置（CMake/ndk-build）3.8、兼容性与版本管理3.9、异常处理四、工程实践建议4.1、隔离原生代码：4.2、单元测试：4.3、渐进集成
  • 一文读懂 Android FFmpeg 视频解码过程与实战分析 2401_85667460 androidffmpeg音视频
    –本文首先以FFmpeg视频解码为主题，主要介绍了FFmpeg进行解码视频时的主要流程、基本原理；其次，文章还讲述了与FFmpeg视频解码有关的简单应用，包括如何在原有的FFmpeg视频解码的基础上按照一定时间轴顺序播放视频、如何在播放视频时加入seek的逻辑；除此之外，文章重点介绍了解码视频时可能容易遗漏的细节，最后是简单地阐述了下如何封装一个具有基本的视频解码功能的VideoDecoder。前
  • Android NDK ffmpeg 音视频开发实战
    文章目录接入FFmpeg1.下载FFmpeg源码2.编译FFmpeg.so库异常处理3.自定义FFmpeg交互so库创建4.配置CMakeLists.txt5.CMakeLists.txt环境配置6.Native与Java层调用解码器准备接入FFmpeg1.下载FFmpeg源码FFmpeg官网地址2.编译FFmpeg.so库移动FFmpeg源码文件夹至AndroidStudio的cpp包下（也可以
  • 低代码平台的出路在哪里？能做什么，优势是什么？——从效率、业务系统交互与中台架构谈起 橙武科技 低代码低代码
    一、背景与问题引入随着数字化转型的深入推进，低代码平台（Low-CodePlatform，LCP）逐渐成为众多企业快速构建业务应用的重要工具。特别是对于非技术人员，低代码平台提供了极大的便利：通过简单的拖拽式界面，快速构建表单、页面、流程等应用功能，减少了开发周期与维护成本。然而，随着低代码应用逐渐普及，很多企业开始意识到低代码平台的局限性，尤其是在大型业务系统和系统交互方面。问题提出：低代码平台
  • 中原焦点团队张俊功初24、中24持续分享第336天 挑战约练第七期第八周第1次共15次，总计60次（2021.12.27） 5d4750373a7c
    叙事疗法第三讲：我是解决问题的主人。将将问题外化，而不是内化。人们的困境与主流文化、知识、社会价值是息息相关的。解构：挑战主流文化、文化、社会价值。一个人在困境中，无法去改变的时候，需要有人尊重、理解、帮助，梳理自己的脉络，然后达到自助，让自己成为生命的主人。问题不仅可以外化，资源也可以外化。把人和问题分离，问题是问题，人是人，与人合作，了解问题，消除问题或者与问题和解。
  • ymyw-mysql训练营-Day5
    文章目录1.什么是聚合函数，常见的聚合函数有哪些？2.查询关键字解释3.什么是窗口函数？有哪些使用场景？4.内连接、左连接、右连接、全连接（MySQL不支持哪个？）5.什么是子查询/嵌套查询？6.MySQL中的一对一、多对一、多对多关系如何设计？7.学生与学籍号、班级、老师关系设计（含建表）（1）学生与学籍号（一对一）（2）学生与班级（多对一）（3）学生与老师（多对多）8.外键应该放在哪个表中？9
  • 《不爱请转身》尹月挽陆华亭(不爱请转身小说)全文免费阅读已完结 寒风书楼
    《不爱请转身》尹月挽陆华亭(不爱请转身小说)全文免费阅读已完结主角：尹月挽陆华亭简介：尹月挽决定离婚了。她告诉了所有人，父母，朋友，同事，唯独没有告诉陆华亭，京北第一医院的外科圣手，她结婚三年的丈夫。床头放着两份文件，第一份是离婚协议书，第二份是她飞往国外的机票，时间在一个月以后。一年前，她所在的设计部在欧洲成立了分公司，总监的位置一直空缺，老板欣赏她的才华，一直想要将她调到那里去。不是不心动的，
  • 新刊速递|《视野》杂志2021年第11期目录 作家编剧巴陇锋
    视野》杂志简介《视野》杂志创刊于1997年，是由兰州大学主办的综合性文摘类综合文化期刊，64页全彩印刷，以“新锐、人文、生活”为办刊理念，赢得了读者及社会大众的肯定与信赖，成为兰州大学的文化“名片”之一，也同时成长为甘肃省继《读者》之后的第二大品牌期刊。一流的编辑实力加目标读者群的精准定位，形成了视野卓越的市场影响力，《视野》已成为大中学校园里极具有专公信力和号召力的读物！如下为《视野》杂志202
  • 通俗易懂循环神经网络（RNN）指南
    本文用直观类比、图表和代码，带你轻松理解RNN及其变体（LSTM、GRU、双向RNN）的原理和应用。什么是循环神经网络循环神经网络（RecurrentNeuralNetwork,RNN）是一类专门用于处理序列数据的神经网络。与前馈神经网络不同，RNN具有“记忆”能力，能够利用过去的信息来帮助当前的决策。这使得RNN特别适合处理像语言、语音、时间序列这样具有时序特性的数据。类比：你在阅读一句话时，会
  • 2023-02-21 初心倩萦
    2023.2.21周二P22-P24碎片化时间，我们可以做哪些安排呢？第22页到23页给了我们答案。书中提到了还可以用碎片时间来学习新技能和开展第二职业。比如说，学习的新技能，像学习新的语言，新的计算机操作技巧及办公软件技能、了解一些未知领域的新知识。其中，“通勤路上听与专业有关的新闻”这句话提醒了我。其实我在上学和刚上班的时候，都面临着较长时间等公交车和坐公交车的车程。之前的这段时间，要么思考一
  • 【免费下载】 音频切割器：一键智能化裁剪音频空白 沈昂钧
    音频切割器：一键智能化裁剪音频空白在音频处理的世界里，精确而高效的工具是创作的灵魂。今天要向大家隆重推荐一个名为AudioSlicer的开源宝藏应用，它通过直观的图形界面，帮助用户基于静音检测来自动分割音频文件。项目介绍AudioSlicer是一款简洁高效的小工具，专为那些希望快速无痛地将音频依据静默部分进行切割的创作者们设计。其界面友好，操作简单，即便是音频处理新手也能轻松上手。无论是播客后期制
  • 2022-6-17晨间日记 饼饼是逊啦
    今天是周五起床：9:02就寝：未知天气：热心情：目前愉悦叫我起床的不是闹钟是梦想年度目标及关键点：无本月重要成果：无成功日志-记录三五件有收获的事务财务检视存款5w啦，小白加油！人际的投入暂无开卷有益-学习/读书/听书呜呜呜，在重温《欢乐颂1》健康与饮食今日步数：骑车今日锻炼：提肛运动3次50/次今日饮食：早上-苹果；中午:小饼干一袋；晚饭:待定好习惯打卡多笑一笑，心态摆正！不强求，以后晚上10点
  • 元宇宙该洗牌了 产业深观
    文/孟永辉轰轰烈烈的元宇宙大潮终究还是没有逃脱洗牌的命运，随着Meta股价的下跌以及诸多泛元宇宙概念的失色，元宇宙将无可幸免地进入到一场深度洗牌期。在目前这样一个背景之下，我们谈论元宇宙的洗牌似乎早了些，尽管如此，这种现象却正在发生着。我们不妨可以大胆想象在未来的某一个时间点，我们还将会看到更多有关元宇宙洗牌的事件的出现。如果拿互联网行业的洗牌与元宇宙行业的洗牌作对比，似乎元宇宙的洗牌来得稍微早了
  • melody-canvas：实时音频可视化与创意画布
    melody-canvas：实时音频可视化与创意画布项目介绍melody-canvas是一个开源项目，致力于为用户提供一个强大的音频可视化与画布编辑平台。通过该平台，用户可以利用Web技术实时地将音频信号转换成视觉元素，同时支持画布上的图像和文本编辑，创作出独一无二的音频艺术作品。项目技术分析melody-canvas的核心功能基于现代Web技术构建，主要包括以下技术组件：WebAudioAPI：
  • 《我都要死了你让我觉醒前世记忆》林寻安妙汐_(我都要死了你让我觉醒前世记忆)全集在线阅读 热门小说_2
    书名：我都要死了你让我觉醒前世记忆主角：林寻安妙汐简介：她有心中的白月光，却无法与之相伴，只能选择他作为合约替身。他拿着工资为白月光做饭，两人相处得很愉快。然而，合约即将结束时，他却被诊断出重病，只剩两个月的寿命。此时，合约老婆却希望假戏真做。可以关注微信公众号【书香名斋】去回个书名或主配角，即可免费阅读【我都要死了你让我觉醒前世记忆】小说全文！>>>>>>>>>>戳我继续阅读>>>>>>>>>戳
  • 雨天日更、学习与提升， 生字游戏
    首先应该注明，致自己，说成小心眼最合适，因文化成度低有些文字的词语难易运用好，所以才有如此的霞小的心思，说自私不为过只是想找个提升自己满足心理的需求，致自己安慰一翻。艺多不压身、是有意还是无意进入写的提升之门。应该说无意事实是有意的，只能说好心之人常善有，介绍进入了这个写的程序。经过看到写群里的人于事才发现、自己走进一辉煌时代年青人群里，这是他们年青人的摇蓝梦想之地，但我也仿佛佣有了一个青年人的梦
  • 全新开发范式：uni-app X助力全平台原生应用 程序媛夏天 小白学鸿蒙uni-app
    在2025年数字技术发展的关键节点上，国产操作系统正在经历从愿景走向现实的深刻变革。DCloud于5月12日发布的HBuilderX4.64正式版，标志着uni-appx已实现对鸿蒙、Android、iOS、Web、微信小程序等主流平台的全覆盖，为开发者带来了全新的跨平台开发体验。一、技术革新：Web技术栈与原生性能的完美融合uni-appx的突破性在于其独特的设计理念：“开发态基于Web技术栈，
  • 设计模式入门：抽象工厂模式 happyJared
    UML类图抽象工厂模式代码示例定义苹果类接口，包含一个描述方法/***苹果抽象类*/publicinterfaceIApple{/***具体描述*/voiddescribe();}红苹果，实现了接口苹果和定义的方法/***红苹果*/publicclassRedAppleimplementsIApple{@Overridepublicvoiddescribe(){System.out.println
  • stm32内存分析
    1、0x00-0x7FFFF有什么用？？为什么是512KMbyteSRAMSystem-MemoryFlash的内存映射;映射中最大的内存大小2、SystemMemory有什么用出厂预置的Bootloader系统启动控制固件更新支持调式与恢复3、I-busD-BUSS-BUS能不能访问SRAM?当启动模式是SRAM时可以4、初始化flash时，用的是那个总线去访问？？I-busD-busS-BUS
  • Kotlin flow实践总结 Android技术圈
    Flow是什么按顺序发出多个值的数据流。本质就是一个生产者消费者模型，生产者发送数据给消费者进行消费。冷流：当执行collect的时候（也就是有消费者的时候），生产者才开始发射数据流。生产者与消费者是一对一的关系。当生产者发送数据的时候，对应的消费者才可以收到数据。热流：不管有没有执行collect（也就是不管有没有消费者），生产者都会发射数据流到内存中。生产者与消费者是一对多的关系。当生产者发送
  • 树莓派i2c通信C语言,基于I2C的STM32与树莓派通信 茶话股经 树莓派i2c通信C语言
    传统的串口通信会丢失数据，不可靠，故采用I2C(同步串行总线)通信。树莓派上使用python脚本，后期将使用c或java重写，目前没有需求。树莓派作主机(Master)，stm32作从机(Slave)。特别需要注意的是，I2C的通信虽然只需要两根线就能通信，但是需要第三根线接地GND(提供判断低电位的能力)，否则不能正常识别stm32从机使用ArduinoIDE编程以下是STM32的代码：#inc
  • 如何提高JPA项目的扩展性：模块解耦的实践与策略
    在企业级开发中，JPA（JavaPersistenceAPI）因其对象关系映射的强大能力，常被用于构建业务层与数据层之间的桥梁。然而，随着项目复杂度增加，JPA项目常常面临模块之间强依赖、跨模块实体耦合、难以演进等问题，严重影响系统的可扩展性和可维护性。相比之下，MyBatis项目由于其“SQL即服务”的特性，天然具备更强的解耦性。本文将分析JPA项目中常见的模块依赖问题，探讨其背后的原因，并提供
  • 高省、好省、粉象、福袋生活、高佣联盟、美逛佣金显示与下单时不一样？ 高省APP
    最近很多高省、好省、粉象、福袋生活、高佣联盟、美逛的宝宝反馈下单后，佣金显示与下单时不一样。导致这个问题的原因是用了小红包，提交订单时，红包选项一定要关闭，切记不要勾选红包，用红包没佣金或者佣金变得很低。高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。古楼导师高省邀请码555888，注册送2皇冠会员，送万元推广大
  • 我与《写作》的故事 开心果子
    要想提高写作能力，就要磨练写故事的能力，昨天读了叶老师与阅读的故事，今天又再写作的故事里相逢，跟叶老师隔着书本进行了一场对话，我就是那大部分小伙伴中的一员，在微信读书《认知觉醒》的书评里认识了叶老师，通过叶老师的写作，来到这里与大家相聚。我也来讲讲，我与写作的故事。2022年8月7日，我读到了《逆熵增成长之路》的写作篇，开始注册写下第一篇文章《日更百天挑战》，到今天24天，写了28篇小短文，2.2
  • 2020-07-25 京心达_周莎
    2020.7.25今日体验：每个人都有可能犯错，彼此之间的伤害很难避免。凡事看淡一些，不要满怀怨恨，怒气冲天。生气就是拿别人的过错来惩罚自己。心中装满怨恨，也就失去了阳光与温暖。
  • web报表工具FineReport常见的数据集报错错误代码和解释 老A不折腾 web报表finereport代码可视化工具
    在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。   NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码
  • Java的WeakReference与WeakHashMap bylijinnan java弱引用
    首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea
  • Linux——（hostname）主机名与ip的映射 eksliang linuxhostname
    一、 什么是主机名 无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的； 主机名是用于什么的呢？ 答：在一个局域网中，每台机器都有一个主
  • oracle 常用技巧 18289753290
    oracle常用技巧 ①复制表结构和数据   create table  temp_clientloginUser as   select distinct userid from tbusrtloginlog ②仅复制数据 如果表结构一样 insert into  mytable  select  * &nb
  • 使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException 酷的飞上天空 exception
    有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou
  • IT系统分析师如何学习大数据 蓝儿唯美 大数据
    我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系 统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能
  • spring学习——简介 a-john spring
    Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，
  • 自定义颜色的xml文件 aijuans xml
    <?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &
  • 运营到底是做什么的？ aoyouzi 运营到底是做什么的？
    文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用
  • js面向对象类和对象 百合不是茶 js面向对象函数创建类和对象
    接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言 但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下  ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似   下面介绍一些js的类和对象的创建的技术   一:类和对
  • web.xml之资源管理对象配置 resource-env-ref bijian1013 javaweb.xmlservlet
    resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类
  • Create a composite component with a custom namespace sunjing
    https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace   When you developed a composite component the namespace you would be seeing would
  • 【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter bit1129 mongodb
     一、复本集为什么要加入Arbiter这个角色 回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。 什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a
  • Javascript开发笔记 白糖_ JavaScript
    获取iframe内的元素 通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if
  • Web浏览器Chrome打开一段时间后，运行alert无效 bozch Webchormealert无效
    今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。 试了试其他浏览器，发现都是没有问题的。 开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。 这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了 就关闭浏览器重启。   结果就好了，这也太怪异了。难道是cho
  • 编程之美-高效地安排会议 图着色问题 贪心算法 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美 高效地安排会议 图着色问题 贪心算法 * 假设要用很多个教室对一组
  • 机器学习相关概念和开发工具 chenbowen00 算法matlab机器学习
    基本概念： 机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。 它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。 开发工具 M
  • [宇宙经济学]关于在太空建立永久定居点的可能性 comsci 经济
           大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........        所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点
  • oracle 11g database control 证书错误 daizj oracle证书错误oracle 11G 安装
    oracle 11g database control 证书错误  win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面 解决办法： 是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：
  • Java I/O之用FilenameFilter实现根据文件扩展名删除文件 游其是你 FilenameFilter
    在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。 在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例 dcj3sjt126com carray
    # include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",
  • PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引 dcj3sjt126com primary
    PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。 就是 唯一 且 不能为空。INDEX 索引，普通的UNIQUE 唯一索引。 不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号   INT会员姓名  
  • java集合辅助类 Collections、Arrays shuizhaosi888 CollectionsArraysHashCode
      Arrays、Collections   1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); }      a）Arrays.asL
  • Spring Security（10）——退出登录logout 234390216 logoutSpring Security退出登录logout-urlLogoutFilter
           要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu
  • 透过源码学前端 之 Backbone 三 Model 逐行分析JS源代码 backbone源码分析js学习
    Backbone 分析第三部分  Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里， 但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件， 如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。
  • SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter 乒乓狂魔 springMVC
    这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate
  • 分布式基础知识和算法理论 bluky999 算法zookeeper分布式一致性哈希paxos
      分布式基础知识和算法理论 BY [email protected] 本文永久链接：http://nodex.iteye.com/blog/2103218   在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同
  • Android Studio的.gitignore以及gitignore无效的解决 bell0901 androidgitignore
    　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了 　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store
  • 成为高级程序员的10个步骤 tomcat_oracle 编程
    What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。   Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加 提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进 历经更大的挑战。随着你的成长，各种影响力也会提高。
  • mongdb在linux下的安装 xtuhcy mongodblinux
    一、查询linux版本号： lsb_release -a  LSB Version:    :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他