SZ_FED
SZ_FED

通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配

移动端H5网页适配:

在开始阅读这篇文章之前，请大家先思考一个问题，移动端为什么要进行适配？不适配会怎么样？

以下是我的项目经验总结：设计同事给的设计稿中使用的css单位一般是px，使用px单位设置页面的大小时，分辨率越大，显示的元素越小。

如下图1所示，页面元素使用的单位是px，未进行适配：iPhone5、iPhone6及iPhone6 Plus的显示效果：iphone5元素较大，iphone6 plus元素较小。举个栗子：iPhone5显示的中间文字换行了，但iPhone6及iPhone6 Plus未换行。

控制台看到的css单位为px:
通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配_第1张图片

适配的方法有很多种，本节介绍之前开发项目使用的适配方法：使用post-loader 加 postcss-pxtorem第三方依赖进行px转换为rem以达到适配目的。
用rem适配之后的效果如下图2所示,不同分辨率的设备显示的相对图片大小相似。

控制台看到的css单位为rem:
通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配_第2张图片

相关术语解析：

rem ：是一个相对单位，以html元素的font-size大小为基准，可计算子元素的相对大小。通过这个特性，设置不同设备下html 元素font-size的大小，并以该基准缩放元素就能达到适配目的；

通过简单的例子了解rem：

<style>
/*（浏览器默认字体大小是16px)；*/
 .father{
 /*相对于html元素font-size 的2倍，即 2rem = 2*20 = 40px*/
        font-size: 2rem; 
    }
 .son{
 /*相对于html font-size 的4倍 ，即 4rem = 20*4 = 80px*/
        font-size: 4rem; 
    }
    style>
style>

<body>
    <div class="father">我是父元素--默认字体大小
        <div class="son">子元素的大小div>
    div>
body>

与rem名称类似的em单位，则是相对于父元素文字的大小的缩放；

例：

<style>
    div{
        /* 浏览器font-size 默认值16px,2em表示默认值的两倍即 2em => 16*2=32px */
        font-size: 2em; 
    }
    span{
        /* 相对于父元素 2em 的4倍 ，即 4em => 32*4 = 128px */
        font-size: 4em;
    }
    style>

<body>
    <div>我是父元素--默认字体大小
        <span>子元素的大小span>
    div>
body>

设计稿中常用的标准像素单位px, 简单的讲是类似于绝对单位的相对单位，调试发现，宽为 375 的手机屏幕，设置width : 375px；就能布满宽度。

一个页面的px转换为rem的计算量小，可以通过手动计算，多页面应用怎么做到一键适配呢？
答：可以使用：post-loader 加 postcss-pxtorem 对css文件进行转换。

以下是转换依赖包的官方文档地址：
post-loader
postcss-pxtorem

Vue项目中webpack配置步骤：

  1. 安装post-loader和postcss-pxtorem依赖;
  2. 在webpack.common.config.js 的module下的rules中添加配置：
//引入postcss-pxtorem
const pxtorem = require("postcss-pxtorem")
......
//module的配置
      {
        test: /\.(scss|css)$/,
        loaders: [
          'style-loader',
          'css-loader',
          //**************************适配配置开始
          {
            loader: 'postcss-loader', //放在这'style-loader','css-loader'后面，sass-loader前面
            options: {
              ident: 'postcss', //当引入外部的依赖包作为组件配置项时需要定义一个唯一的标识符，推荐这样写
              plugins: [
                pxtorem({
                  rootValue: 16, //表示根元素html的fontSize值,也可以是100,获取任意其他值
                  propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem
                }),
              ],
            },
          },
          //**************************适配部分结束
          'sass-loader',
        ],
      },
  1. 根据屏幕的大小计算合理的html 元素font-size 值,这里新增一个rem.js文件，写入以下函数，函数自执行，rem.js放入static中，在main.js中引入，函数的作用是设置不同分辨率屏幕下html 的font-size大小。
(function () {
  var initFontSize = 16
  var iPhone6Width = 375
  var clientWidth = window.document.documentElement.clientWidth || iPhone6Width
  var newFontSize = initFontSize * (clientWidth / iPhone6Width)
  document.documentElement.style.fontSize = newFontSize + 'px'
})()
  1. 完成以上步骤后，启动项目，即可获得以上图2的适配效果。

你可能感兴趣的:(web前端开发技术,Vue)

  • 【vue-5】Vue 3 中的 v-model：双向数据绑定的全面指南
    在Vue开发中，v-model是实现表单输入和应用状态之间双向绑定的关键指令。Vue3对v-model进行了重大改进，使其更加灵活和强大。本文将深入探讨Vue3中v-model的工作原理、新特性以及最佳实践。1.v-model基础1.1什么是v-modelv-model是Vue提供的一个语法糖，它本质上结合了v-bind和v-on：等价于：1.2基本用法在表单元素上使用v-model非常简单：你输
  • ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 �困宝� vue.js前端大屏端
    ‘vue-cli-service’不是内部或外部命令，也不是可运行的程序产生原因：项目下的node_modules文件损坏。解决方案：第一步：删除图片中的文件第二步：在Terminal中运行yarninstall或者npminstall；可能会报缓存问题：清缓存：yarncacheclean第三步：等待下载加载完成即可；在Terminal中运行yarninstall或者npminstall；第四步
  • 彻底解决＂‘vue-cli-service‘ 不是内部或外部命令＂的问题！ 晷龙烬 龙鳞拆解（前端深渊）vue.js前端npm
    以龙息淬炼代码，在时光灰烬中重铸技术星河欢迎来到晷龙烬的博客✨！这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创！欢迎在评论区交流！引言我最近拉取了一个Vue2的老项目，各种尝试，最终卡在了“vue-cli-service不是内部或外部命令”的这个错误提示上，令人倍感挫败。本文聚焦这一常见难题，提供我解决的思路，以供参考。一、问题分析该错
  • vue2和vue3的区别 Sun_d9e7
    组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的时太棒了”。我们这里的例子里就不展示了，用简单的单根节点的组件
  • vue 组件中如何引用外部js文件中的变量或者方法 一叶孤舟1990
    相信很多新手小伙伴都会遇到这样一个问题，就是我如何引用一个外部文件中的变量，下面我为大家分享一下解决办法：（如果解决小伙伴的问题，请帮忙给我点个赞吧，谢谢！！！）1，首先自己创建一个js文件放到assets中：map.js2，map.js中代码如下：（data是数组，geoCoordMap是对象，这个因为太长了所以就不展开了）重点：export{//导出多个对象geoCoordMap,data}3
  • vue3使用AntV X6 (图可视化引擎)历程[二] 在路上` Vuevue.jsjavascript
    通过h函数动态展示自定义节点内容一、案例效果二、案例代码父组件.BloodTopology.vuerightContentimportRightDrawerfrom'@/common/components/topologyToolKit/RightDrawer.vue';importTopologyCompactfrom'@/common/components/topologyToolKit/To
  • 基于 Vue3 + ECharts 实现渐变分段折线图：支持动态区间、响应式渲染与颜色控制 saadiya~ echarts信息可视化前端
    在数据可视化项目中，折线图是最常见的图表类型之一，而通过颜色分段渐变可以让用户更加直观地感知数据的变化趋势和区间风险。本文将带你实战一个基于Vue3+ECharts的渐变分段折线图组件，支持传入valueList控制每段颜色，适配多种数据类型，实现图表的动态更新与响应式自适应。一、效果预览与场景说明该组件可应用于以下场景：空气质量指标（AQI）路况拥堵指数（如：0-0.5畅通，0.5-1一般，1-
  • 前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序 天天进步2015 编程技巧前端vue.jsspringboot
    前端使用Vue3，后端使用SpringBoot构建HelloWorld程序前端（Vue3）首先，创建一个Vue3项目。1.安装VueCLInpminstall-g@vue/cli2.创建Vue项目vuecreatefrontend在交互式提示中，选择默认的Vue3预设。3.修改App.vue在frontend/src目录下，修改App.vue文件：{{message}}{{error}}expor
  • Vue 报错error:0308010C:digital envelope routines::unsupported 解决方案 abchuangyoucheng vue.js前端javascript
    Vue报错error:0308010C:digitalenveloperoutines::unsupported解决方案拿了一个比较老的项目部署在本地，然后先安装依赖npminstall,最后npmrunserve,在runserve的时候报错：报错error:0308010C:digitalenveloperoutines::unsupported，出现这个错误是因为node.jsV17版本中最
  • 前端基础知识Vue系列 - 17（vue中key的原理）
    一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key...用+newDate()生成的时间戳作为key，手动强制触发重新渲染那么这背后的逻辑是什么，key的作用又是什么？一句话来讲key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点场景背后的逻辑当我们在使用v-for时，需要给单元加上
  • Vue 3.6 Alpha 深度解析：Vapor Mode 如何颠覆虚拟 DOM 时代 给钱，谢谢！ vue3前端jsvue.jsjavascript前端vue3.6VaporMode
    无虚拟DOM、原生级性能、渐进式迁移——Vue进入双运行时新纪元在最近的VueConf大会上，尤雨溪正式发布了Vue3.6Alpha版本，其中最引人瞩目的特性VaporMode（无虚拟DOM模式）标志着Vue在渲染引擎上的革命性突破。本文将深入解析其技术原理、性能表现和实践方案，并附带完整可运行的代码示例。一、为何需要VaporMode？传统虚拟DOM的瓶颈：-️虚拟节点创建与对比的运行时开销-内
  • 基于 vue＋Cesium 实现军事标绘之钳击箭头绘制实战
    效果图在地理信息系统（GIS）开发中，军事标绘是一个重要的应用场景，其中箭头类标绘（如攻击箭头、钳击箭头）是常用的战术符号。本文将基于Cesium引擎，详细讲解如何实现可交互的钳击箭头绘制功能，支持动态跟随鼠标调整、固定部分标绘区域及自动清理临时标记等特性。一、技术背景与实现目标Cesium简介Cesium是一款开源的3D地理信息引擎，支持高精度全球地形、影像加载及矢量数据可视化，广泛应用于数字地
  • vue3实现可视化大屏布局 程序猿的杂货店 前端VUE3开发笔记可视化大屏vue3vue3页面布局
    实现功能:1实现4x3宫格布局，2自定义设置跨行，跨列自动隐藏对应列，比如setAreaSpanAndUpdateVisibility(2,3,2);表示设置区域2，跨3行，跨2列，然后区域3，6，7，10，11自动隐藏3内容自动剧中1效果图代码数据可视化大屏-顶部区域{{item.id}}-{{item.title}}测试区域1跨2行2列-->importGridCellfrom"./compo
  • Vue.js 全面解析：构建现代前端应用的渐进式框架 斯~内克 vue知识点前端vue.js
    一、Vue.js的核心价值与演进1.1前端框架的变革与Vue的定位根据2024年StateofJS调查报告，Vue.js以82%的开发者满意度稳居前端框架前三甲。其核心优势体现在：渐进式架构：可从轻量级视图层扩展至全栈解决方案响应式系统：基于Proxy的精准依赖追踪（Vue3）组合式API：代码复用率提升60%以上生态系统：覆盖SSR、状态管理、移动端等20+场景1.2版本演进里程碑版本发布时间里
  • 新一代会员分销返利小程序，聚合cps系统独立部署，对接20多个CPA/CPS资源 +V：ywxs5787 小程序开发cps分销软件开发小程序uniapp微信小程序
    技术栈前端：vue3+uniapp后端：PHP数据库：MySQL一、系统介绍PHP部分代码'value1','param2'=>'value2',//添加其他参数];//发送HTTPPOST请求$ch=curl_init();curl_setopt($ch,CURLOPT_URL,$url);curl_setopt($ch,CURLOPT_POST,true);curl_setopt($ch,CU
  • Vue3 + WebSocket 穆罕周 websocket网络协议网络
    Vue3与WebSocket结合能够很好地满足实时通讯的需求。通过合理设计和管理WebSocket连接的生命周期，以及实现必要的重连逻辑和心跳检测机制，可以构建出响应迅速且稳定的实时应用。WebSocketWebSocket允许服务端主动向客户端发送数据，无需客户端发起请求，从而实现了低延迟、高效率的数据交换。它通过HTTP升级协议握手来建立持久性的连接，并使用帧（frame）的形式传输数据。Vu
  • VUE如何设置语音 穆罕周 vue.js前端javascript
    在Vue项目中设置语音功能可以通过1、使用WebSpeechAPI和2、集成第三方语音合成库来实现。WebSpeechAPI是一种浏览器内置的API，它提供了语音识别和语音合成功能，而第三方语音合成库则提供了更加丰富和灵活的功能。一、使用WebSpeechAPIWebSpeechAPI是一种原生浏览器API，它包括了语音识别和语音合成两部分。以下是如何在Vue项目中使用WebSpeechAPI设置
  • 语音识别文字
    记录项目中的语音识别文字功能是怎么做的，有需要的可以借鉴一下，都是干货，简单实用。实现原理：调用浏览器的API监听用户语音，浏览器监听到语音后，就会转成文字。测试环境：Edge--免费(国内可用)Safari--免费(国内可用)Chorme--免费(需要科学上网)FireFox--不支持下面是代码函数干货：注意我用的vue2写的，所以有一些语音展示的动画控制按钮和文本显示的代码。复制代码后，根据你
  • 基于Python+Vue的个性化教学可视化系统设计与实现django 源码哆哆*V+ymhydo 毕设pythonvue.jsdjango
    文章目录前言系统实现效果前台用户功能模块后台管理功能模块Python技术介绍Django框架介绍预期达到的目标设计思路详细视频演示技术路线解决的思路性能/安全/负载方面可行性分析论证为什么选择我们
  • UniApp 常用UI库 xkxnq uniappuniapp
    UniApp是一个基于Vue.js的跨平台开发框架，常用于开发微信小程序、H5、App等应用。为了快速构建界面，开发者常使用一些UI库，这些库提供了预定义的组件（如按钮、列表、表单等），能显著提升开发效率。以下是一些常用的UniAppUI库及其对应的GitHub地址（开源地址），这些都是社区中广泛使用且维护活跃的项目：常用UniAppUI库及地址uViewUI简介：一个功能强大、高度可定制的UI框
  • echars世界地图，显示指定的国家散点图 xkxnq vuevue.jsjavascript
    效果如下1.下载:npminstallecharts--save2，引入世界地图在main.js文件里引入(这里是Vue3.0的模板)importechartsfrom'echarts'Vue.prototype.$echarts=echartsimport'../node_modules/echarts/map/js/world.js'//引入世界地图3.使用import{mapoption,p
  • 微信小程序 - 超详细 TDesign 组件库环境搭建，微信小程序项目开发中引入并使用 tdesign 组件库的详细教程（腾讯 TDesign 组件库与微信小程序开发） 前端开发大师鸭 +Wechat微信小程序tdesign小程序安装tdesign组件库tdesign组件库官方文档腾讯TDesign官方使用教程使用组件没有任何样式就一段字html放上去没有效果怎么办
    前言网上几乎没有教程，本文提供优质教程保证搞定。在微信小程序开发中，详解小程序TDesign组件库环境搭建与使用教程，完整安装及配置流程，项目引入使用tdesign组件示例代码，解决安装失败、安装报错、使用组件不显示、配置好了但使用没反应、无组件样式等问题，提供详细配置教程和组件的使用实例。小程序vue2|vue3版本语法都能使用，跟着教程安装集成即可。如下图所示，详细安装配置及引入使用，解决各种
  • Uniapp微信小程序开发：后端服务器搭建指南（语言选择+部署方案）
    目录前言：Uniapp+微信小程序的架构模式️后端服务器的作用后端语言选择（Node.js/Java/Python/PHP/Go）☁️服务器部署方案（云服务器vsServerless）实战：如何连接Uniapp与后端API安全优化：HTTPS、JWT、接口鉴权数据库选择（MySQL、MongoDB、云数据库）总结&最佳实践1.前言：Uniapp+微信小程序的架构模式Uniapp是一个基于Vue.j
  • el-amap-bezier-curve运用及线弧度设置 ·零落· Vue日常研发问题总结vue.jsjavascriptecmascript
    文章目录简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介‌el-amap-bezier-curve是Vue-Amap组件库中的一个组件，用于在高德地图上绘制贝塞尔曲线。‌基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke-color线条的颜色。stroke-style线条的样式。stroke-opacity线条的透明度。
  • Python包高级开发技术：性能优化与系统集成 软考和人工智能学堂 Python开发经验深度学习强化学习python性能优化开发语言
    引言掌握Python包的高级开发技术是构建工业级应用的关键。本文将深入探讨Python包的性能优化策略、C扩展开发、异步IO集成以及跨语言互操作等高级主题，帮助你将Python包提升到专业水平。1.性能优化技术1.1性能分析工具链#性能分析工具矩阵perf_tools={'cProfile':'标准库分析器，提供函数级耗时统计','line_profiler':'行级分析器，需要@profile装
  • Vue 2现代模式打包：双包架构下的性能突围战 Jokerator javascriptjavascriptvue.js
    文章目录一、场景痛点：兼容性与性能的撕裂二、技术解析：ModernMode的双引擎驱动1.基础认知：什么是ModernMode？2.原理深入：HTML智能分发与Safari10修复3.性能收益对比表三、Vue2项目实战：启用Modern模式与深度优化1.基础启用步骤2.避坑指南：常见问题与解决方案3.二次优化策略（结合Modern模式）四、总结：三层认知升华面对ES2015+语法在旧浏览器的兼容包
  • 【no vue no bug】 npm : 无法加载文件 D:\software\nodeJS\node22\npm.ps1 源码方舟 BUGvue.jsbugnpm
    【Bug问题】在vscode中打开项目目录运行npm相关的命令时报下面错误，但是ctrl+r打开控制台输入npm命令又是可以运行的。npm:无法加载文件D:\software\nodeJS\node22\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Pol
  • uniApp出现【ReferenceError: computed is not defined】
    1·问题uniApp出现【ReferenceError:computedisnotdefined】2·解##标题决在当前页导入：import{computed}from'vue'
  • vue项目使用tsx
    1、vue2.7中使用webpack处理，配置如下{test:/\.(ts|tsx)$/,use:[{loader:'babel-loader',options:{presets:['@babel/preset-env','@vue/babel-preset-jsx']}},{loader:'ts-loader',options:{appendTsSuffixTo:[/\.vue$/]//vue文
  • python pywebview + vue3 做桌面端 妃衣 python开发语言
    pythonpywebview+vue3做桌面端Api.py#传给前端的api对象,定义了一个可以通过js调用退出当前应用的函数classApi:def__init__(self)->None:self._window=None#java运行的线程self.process=Nonedefset_process(self,_process):self.process=_processdefset_w
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他