1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿: 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一 .手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思:--最大程度在各个尺寸屏幕上还原设计稿 目标二.px转换成rem:一

错误信息: Module build failed: ValidationError: PostCSS Loader Invalid Options options['useConfigFile'] is an invalid additional property 解决方案[安装postcss-loader包]: npm install --D postcss-loader@2.1.1

ps:本篇依赖golang的sdk已经安装完成: url:https://www.cnblogs.com/mrwhite2020/p/16475731.html   一.下载vscode,选择windows最新版本 https://code.visualstudio.com/Download 默认按照user版本的64位机器选择:system installer和user installer的区别就在用于为所有用户/单用户安装. 二.安装vscode 默认选择对应的路径进行安装 ps:最好将以下

说明 1.git上的配置地址可能都是本地环境,提交到git server后怎么来使用发布不同环境? 2.关于EFCore本地数据库有更新的情况 添加了 Migrations文件 怎么在构建的时候去更新不同环境下的数据库? 下面就来解决这两个问题 1.在测试服务器上分别建立开发.测试 两个目录用于放.NetCore发布文件(发布的.NetCore 用IISHosting方式) 2.在每个目录下建一个对应的配置文件(服务器环境下的配置文件,用作替换) 如下:发布2个站点(授权认证(Identitys

PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推荐第一种(在配置上多了配置选项上有 exclude 属性,可配置是否对 某个文件夹下的所有css文件不进行转换),之前我用的第二种(也是目前使用最多的) 都有可以配置selectorBlackList: [] 要忽略并保留为px的选择器 还有个小技巧 -- 如果个别地方不想转化px.可以简单的使用大

更新时间2014年11月13日  本博文创建时,只有Xcode6.0, Xcode6.0尝试多次,确实如此 之后在6.1版本经博主少量尝试,确实也有如下问题,现更新下博客! iOS8发布之后,苹果强制要求#iPhone6适配#,于是就不得不升级Xcode6.0了,但是发现上传过程遇到了许多不必要的困难,而且丝毫无技术含量,完全是大bug,详情见下:   本文永久地址为 http://www.cnblogs.com/ChenYilong/p/3989010.html,转载请注明出处.  用Xcod

安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save lexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值. 在Galaxy S III手机上 在iphone6/7/8 postcss-px2rem会将px转换为

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就

公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧.以下记录我的项目框架搭建及填坑方案. 搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了.下面说明项目搭建成功后的适配方案. 第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible

想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: [ // 多个loader,从右向左解析,即css-loader开始 MiniCssExtractPlugin.loader, 'css-loader' ] } } 2.自定义loader的查找规则 很多时候,我们可以自己定义loader, 比如在根目录下新建一个loaders的文件夹,文件夹内实现

div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value{margin-left:5px}#crayon-theme-info .description.value{font-style:ital

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大.中.小三种屏幕.所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么

Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex; } 会得到如下代码: .row { display: -webkit-flex; display: flex; } 但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以@include方式书写. 那么问题来了,我只能放弃高效率方式么? 其实不然, Aut

关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入"杂屏"时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 加上Android生态中纷繁复杂的各种奇葩尺寸,现在AP

1,图片适配(在不同像素密度的手机上,加载不同文件夹下的图片) 一套图(800*480,将截取的图片放置在hdpi下,小图(变形不明显), 大图(根据适配的手机,做单独的截取,比如有两款手机适配(做两套分辨率的图))) 总结:drawable下放置的图片分别可以加载到哪些类型的手机上: ldpi的图片加载到320*240的手机上 mdpi---->没有图片(可以放480*320) hdpi的图片加载到800*480的手机上 xhdpi的图片加载到1280*720的手机上( 5英寸) xxhdpi

前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接用CSS3的缩放来做了,因些有以下适配方案,代码如下: <!DOCTYPE html> <html> <head> <title>适配方案2</title> <meta charset="utf-8"> <met

最近项目涉及到将文本文件中的数据导入到Oracle数据库中,故研究了下SQL*Loader,官档提供的资料不是很丰富,很多案例中出现的语句在官档中找不到出处.但它提供的案例本身却彰显出了SQL*Loader功能的强大.鉴于Oracle 11g的软件本身没有携带这些案例,需要专门到官方网站下载Oracle Database 11g Release 2 Examples,甚是麻烦.在此,将这些案例分享,也方便以后研究.借鉴. 因官方文档还没有研究完,手里还有本<Oracle SQL*Loader:

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 引子 在上一篇博客中我们已

有时需为视图属性指定大小尺寸值(通常以像素为单位,但有时也用点.毫米或英寸).最常见的属性有: 文字大小(Text Size),指设备上显示的文字像素高度: 边距(Margin),指定视图组件间的距离: 内边距(Padding),指定视图外边框与其内容间的距离. Android 使用 drawable-ldip.drawable-mdip 以及 drawable-hdip 三个目录下的图像文件自动适配不同像素密度的屏幕.假如图像完成了自动适配,但边距无法缩放适配,又或者用户配置了大于默认值的文字

腾讯优测是专业的app自动化测试平台,除了提供兼容性测试,远程真机租用等多维度的测试服务,还有优分享-腾讯内部的移动研发测试干货精选~ 许多APP都希望获取用户通讯录联系人,利用通讯录关系链信息来丰富产品功能.在读取系统联系人数据库的ContentProvider时,对于双卡双待手机,电话和短信数据都需要标识来自哪张卡. Android 5.0开始加入Dual Sim支持,Android 官方方案和mtk的方案十分类似,感兴趣的小伙伴可以直接移步mtk方案实现方式. 双卡数据库适配流程 根据系统