一、webkit 内核 移动端浏览器 都是 基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要 兼容 普通浏览器...与 webkit 浏览器 ; webkit 内核浏览器 对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ============
在移动端开发,需要解决在移动端下的一些样式初始化,防止在设备出现不同的效果,下面我们看下,需要解决移动端的那些样式需要初始化!...text-decoration: none; } ul,ol { margin: 0; padding: 0; list-style: none; } img {vert-align: top;} //移动端图片边框...移除原生控件样式-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单body { margin: 0; -webkit-user-select: none; }//禁止移动端用户进行复制... -webkit-user-select: none; font-family: Helvetica; } body { -webkit-text-size-adjust: 100%; }//移动端横竖屏字体乎大乎小...-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body 这样移动端开发就可以开始啦
分类：总结，CSS 难度：★☆ Meta 标签 移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。...border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } css3...快速回弹 在 iOS 上如果想让一个元素拥有像 Native 的滚动效果，可以这样写 overflow-y: scroll; -webkit-overflow-scrolling: touch; css3
移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。...rem适配 这种方案在早期移动端...62.5%时，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素时，量尺寸20px,那么你实际单位换成rem时，就是2rem,原有尺寸缩小10倍即可，这种方案会有一定误差，但也基本满足移动端自适应...js 本文code example[1] 参考资料 [1]code example： https://github.com/maicFir/lessonNote/tree/master/html/08-移动端适配方法
一、移动端常见布局 移动端网页的宽度 就是 屏幕宽度 , 不需要设置版心宽度 , 但是 页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 : 单独制作移动端页面 : 使用 流式布局 , 又称为百分比布局...样式初始化 ---- 1、引入 normalize.css 样式文件 在上一篇 【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css...) 博客中 , 介绍了 webkit 浏览器的页面初始化样式文件 , 在 标签中 , 引入该样式 ; webkit 初始化... a {
1.解决移动端触摸a元素，会有蓝色阴影 正常状态： 点击时状态： a{ outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0);
HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。...对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！...移动端兼容 - 取消电话号码识别 具体情形：在iPhone上页面中的数字识别为电话号码。...解决方法：在网页文件的文件头部设置如下代码即可： <meta content="telephone=no" name="format-detection" / 移动端兼容 - 取消电子邮箱识别 具体情形...具体百分比以及rem的选择，之前写过比较详细的文章，可以查看——>移动端页面的开发方法 - 系列
最近在做公司的页面重构工作，因为这次重构有一些非常执着的设计同学，对于半像素极度喜爱，所以我们前端开发痛不欲生。经过一番挣扎，最后总结了一下半像素做边框的一些问...
这是研究了淘宝和拉钩以及网易的兼容全局样式后，提取的兼容样式，经过实战可用 css全局样式 @media screen and (max-width:321px){ body,html{font-size
前言 工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC...端 本文主要是讲解移动端的响应式布局， 但是在真正进入之前， 先了解一些概念。...三个viewport 前面介绍了viewport的概念， 但是在移动端的时候， viewport并不那么容易理解， ppk在移动端提出了三个viewport的概念。...css像素和设备像素 在移动端中， 1个css像素并不等于1个设备像素， 而是取决于设备像素比（物理像素（设备像素）/独立像素（css像素）），像Iphone的Retina屏幕， 就有2倍屏（ip6s）...最后，移动端 iOS 8 以上以及 Android 4.4 以上已经有了vw\vh单位， 1vw\1vh相当于viewport的百分之一宽/高，也就是我们上面所说的x单位， 如果你的手机支持该api，
1 @media only screen and (device-width:375px) and (device-height:812px) and (-we...
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
“每个前端都应该要有自己的一个初始化CSS” ? 做前端的人都知道，新建的html几乎所有的标签都是有margin和padding的，这对于写样式的时候影响很大。...每个前端都应该要有自己的一个初始化CSS，每个CSS也都会不同，像淘宝、腾讯、新浪这些大型的网站，他们的初始化CSS也各不相同，所以每个人的CSS并不需要照搬别人的。...这款初始化CSS，会造成很多是冗余的，像abbr、hgroup、figure等标签，我到现在为止都没用过，甚至没听过，所以这样的初始化CSS是不合理的。...我推荐使用Normalize这款CSS，相对和平，同时进行了一些bug修复 ? 只把常用的标签初始化了，当你想要用到这边没有初始化的标签时，再来这边添加。...然后再在里面添加一些自己认为需要加的初始化样式，这样就有了自己独一的一份reset.css。
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...vscode 自动化插件: Autoprefixer，可以自动化的给css、less、sass文件进行自动化的添加css3前缀。 ?...gulp自动化配置和安装演示： 第一步：安装node环境（已安装，略过) 第二步：安装gulp的全局的包(已安装，略过) $ npm i -g gulp 第三步：初始化项目的npm配置文件和初始化安装要...$ npm init -y # 初始化项目的npm配置文件 $ npm i -S gulp # 安装gulp到本地项目（仅开发时使用，S大写） $ npm i -S gulp-autoprefixer.../css/')); // 最终文件输出的位置 }); 可以根据你的情况修改路径，当前默认是你项目根目录下有个css目录，自动为css目录下面的所有文件自动创建一个*.min.css对应文件，就是最终使用的
那如何保持CSS在每个浏览器上的显示效果相同呢？这就涉及到了CSS初始化的问题。 熟话说，先破后立。...CSS初始化的思想就是先把所有的默认值置为相同的，再把有需要的改成需要的值，这样所有浏览器的显示效果都会相同。...Yahoo CSS Reset： /*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /*...for IE/Win */ html>body { font-size:10px; } /* for everything else */ /*字体边框等初始化*/ body,div,dl,dt,dd...关于CSS Reset的讨论我在知乎上看到一个帖子，讨论Normalize.css 与传统的 CSS Reset 有哪些区别？ 上面说到： Normalize.css 是改良派。
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。...的实验性的属性前需要添加前缀，目前大部分常用的css3新属性都可以直接舍弃前缀。...vscode 自动化插件: Autoprefixer，可以自动化的给css、less、sass文件进行自动化的添加css3前缀。.../src/css/*.css']) .pipe(autoprefix('last 2 versions')) .pipe(gulp.dest('....gulp 在线文档：地址 5. sass、less等预处理语言 sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。
移动端开发课程概述 移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。...这边课程内容包括： CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画、2D3D转换 伸缩布局、多列布局 新单位 在线字体图标 前缀应用、浏览器兼容、渐进增强 媒体查询 移动端适配开发方案...响应式布局开发方案 移动端js、触屏事件 zepto.js\bootstrap\iScroll.js\fastclick.js等移动端库 移动端开发调试 移动端完整项目 2....关于CSS3的学习 2.1 CSS3学习手册 学习CSS3最好的工具就是文档。有文档在手，按照文档多练习一些案例，就能掌握。CSS算是比较容易学习的前端技术了。...CSS预处理和后处理的语言都可以实现编译时处理。 3.
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。...---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
