前端向朔

iPhone这次一下出了三款新机，iPhone Xs、iPhone XR、iPhone Xs Max，那么问题来了，这三款手机与之前的有什么不同，设计师的UI尺寸会发生什么变化，移动端页面的UI到底应该以多少为好？接下来我们将一一探讨。

以下为我将专栏《移动Web开发实战》重新从不同的角度进行整体的梳理之后，在团队分享的PPT。在这里分享给大家。写PPT之前，先将要分享的内容用脑图梳理出来，有了框架填内容就比较快了。 1、禁止ios和android用户选中文字 2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片 3、webkit去除表单元素的默认样式 4、去除a...

背景在平时的web开发过程中，经常会要实现单屏或者叫全屏的效果，同时要满足设备适配要求，虽然一些常见的插件能实现一定的效果，但是如果需要灵活运用的话还是会受到很多限制，在不断的实践过程中，我们梳理了一套全屏适配解决方案，能兼容IE8+，下面我们来详细了解。案例分析案例一： 可以看到图中元素有几类， 1.中间主体内容元素 2.背景图片 3.背景图片上面，主体内容下面的粒子效果...

概述在我们平时的移动Web页面开发过程中，经常会遇到需要横竖屏处理的情况。一般情况下我会项目实际情况，比如页面一般打开的情景是横屏还是竖屏，项目是否需要增加横竖屏适配，页面结构是否复杂等。情景一写好默认横屏页面，竖屏切换时显示提示结构 CSS媒体查询//横屏@media (orientation: landscape){ //显示提示结构}//@medi...

前言前面我们分享 移动Web开发基础-rem布局 的时候提到了两个方案。方案的最终目的都是为了形成一个“流单位”。 方案一是通过媒体查询给html设置font-size，密集的断点设置形成“流单位”。 方案二是通过JS脚本根据设备显示屏大小动态计算出根元素字体大小，这个计算结果几乎是连续的“流单位”。两个方案的对比，我们常用的当然也是建议的方案是第二个。 目前来看，方案二存在一个问题...

前言前面我们已经分享过一篇 移动Web开发基础-百分比+flex布局方案 只是大概讲了下这种布局适配方案的思路，后面我们也通过分享 移动Web开发基础-比例盒子 让大家对百分比布局中比较常用的等比缩放有了比较好的处理方法，本文我们来了解下flex弹性布局，并重点了解移动端web页面中flex弹性布局的兼容写法。flex初认识Flex 是 Flexible Box 的缩写，意为”弹性

概述前面我们已经已经了解了两种基本的布局方案，移动Web开发基础-百分比+flex布局方案 和 移动Web开发基础-rem布局，其中rem布局方案和我们今天要了解的flexible布局方案是有关系的，因为这两种方案布局元素的单位都是rem，他们的区别在于前者是固定viewport缩放值，而flexible布局方案是根据设备像素密度比DPR动态修改viewport，下面我们来具体了解下吧。基本了解1.

上一篇我分享了 rem布局加载闪烁问题，这个问题也是在rem布局经常遇到而且还比较好解决的问题。但是！注意，这里但是哈！（一般但是都要搞事情）你有没有遇到过如下这种问题（页面错乱）：查看代码，html的font-size设置正常，在浏览器和绝大部分手机上也正常，但是在某些手机上页面元素为什么就大了或小了呢？是rem布局不准了吗？非也，其实是系统字体大小的问题，这类问题常见于安卓设备上，而且是内嵌在A

先上体验地址：http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage扫描二维码：问题rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小，这是怎么回事呢？为此，我们来探讨一下！rem的布局具体不介绍了吧，你应该已经掌握或者会用了。这里我的设计稿是750px的，以下是我用来动态设置ht

前言在了解了基本的布局方案 移动Web开发基础-百分比+flex布局方案 之后，我们来了解下利用rem这个css单位来布局的方案。 其实不管哪种方案，最终的目的都是为了适配不同设备尺寸的屏幕显示。基本认识1.px是布局当中的css像素 2.em是相对父元素大小的单位，可以用来设置字体，行高，缩进等一些css属性 3.rem是根据根元素，也就是HTML元素的字体大小来计算的，因为rem单位都是根

前言上篇在移动Web开发基础-百分比+flex布局方案中说到了比例盒子的实现，因为在移动端，需要适应各种屏幕宽度的设备，所以我们的图片以及其他一些元素需要根据屏幕宽度自适应的等比例缩放，这里就需要用到比例盒子的布局方法。接下来让我们一起来了解下实现比例盒子的几种方法吧！这里会介绍四种实现方式，分别是用css的vw单位，垂直方向的padding或者margin，以及因此产生的问题而衍生的用伪元素实现的

前言移动端适配是一个非常繁琐的问题，当然，只要掌握了一些基础的布局方式之后，适配问题也不再是大问题。其实也没有非常死板的适配方案，一般实际开发过程中也是根据项目实际情况采取不同的适配方案或者混合使用几种。目前常用的布局适配方案有百分比+flex布局；以淘宝首页为代表的 rem+viewport缩放 flexible 布局方案；固定viewport，通过js动态修改html字体大小的rem布局，这里我

详细分解1、禁止ios和android用户选中文字.css{-webkit-user-select:none;}2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片.css{-webkit-touch-callout: none}3、webkit去除表单元素的默认样式.css{-webkit-appearance:none;}4、修改webkit表单输入框placeholde

什么是metaMeta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。Meta ： 即 元数据（Metadata）是数据的数据信息。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果

导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。 用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户...

背景 近年来，随着智能手机的普及，移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发，转向了移动端Web开发或者是混合开发，既然有需求，那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。基础准备首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了） ，如果能懂点JS那就更好啦。其次我们要清楚一些