H5常用代码：适配方案1

手淘H5移动端适配方案flexible源码分析

移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1. viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的webview)用来展示我们网页的那部分区域,vie…

H5 端 rem 适配方案与 viewport 适配

H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目录的 font-size 为 18px,则 1rem=18px 媒体查询设置 @media screen and (min-width: 320px) { html { font-size: 32px; } } @media screen and (min-width: 375px) { html…

H5常用代码：适配方案5

此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框来设计的,当你的设计稿中到处是一像素边框,而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候,而又无法劝服他们妥协的时候,就用这种适配方案吧,亲. 适配方案5代码如下: <!DOCTYPE html> <html> <head> <title>主结构&…

H5常用代码：适配方案4

前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正的适配喽,呵呵,开个玩笑,其实适配方式千差万种,怎么用全靠自己把握,遇到问题总有解决方法,兵来将挡水来土掩,实在解决不了的就想办法绕过,哈哈. 前面说了那么多废话,开始干正事,适配方案4主要是通过CSS3新增的一个长度单位REM来实现的,约定如下,页面中的1rem就是当前html的字体大小,假如当H…

H5常用代码：适配方案3

在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有明显的切割,于是想到既然是保证内容在整屏,那是不是只要保证高度在整屏内就完美了,不管屏幕怎么小整个高度被填在屏幕内,于是就有了这一种适配方案: 代码如下: <!DOCTYPE html> <html> <head> <title>主结构&适配方案3<…

H5常用代码：适配方案2

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

H5常用代码：适配方案1

在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视口980来自动缩放以显示主内容在屏幕内,既然有这么个特性,那自然适配也就可以通过通过控制视口来达到适配的目地. 以下是我工作中经常用到的第一种移动端适配方案: <!DOCTYPE html> <html> <head> <title>适配方案1</titl…

最佳移动端h5自适应rem适配方案

一.利用lib-flexible.postcss-plugin-px2rem插件进行移动端rem适配. 1.第一引入lib-flexible . 安装lib-flexible: npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible', 在index.html中是否去掉meta name="viewport" 标签要看框架具体情况,具体请看第四条, 2.第二使用p…

h5 移动端适配方案思考

基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(device independent pixels),也可以称为设备无关的逻辑像素 meta里面设置width=device-width,这个device-width就是设备独立像素在chrome里看到的ip6为375667,ip4为320480等等都是设备独立像素,它们在数值上与css数值是相等的…

H5常用代码：页面框架

万变不离其宗,道法自然! 虽然H5的小项目一波又一波,但有一个东东基本没什么变化,那就是整个页面的框架结构. 我所常用的H5常用页面框架如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&q…

web h5常用代码总结

注意:本文原创,转载请说明出处 1.使图片和文字水平居中,给图片css样式:vertical-align: middle;vertical-align:middle的时候,是该元素的中心对齐周围元素的中心. 2.给一个div透明背景,给div添加css: opacity:0.7; filter:alpha(opacity=70); 3.兼容各个浏览器,添加css样式:filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5;…

整理h5移动端适配方案

<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https://blog.csdn.net/qq_21729177/article/details/79466951 <如何在Vue项目中使用vw实现移动端适配>:https://www.w3cplus.com/mobile/vw-layout-in-vue.html…

H5移动端适配方案-rem

为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的font-size的值,即html的font-size:10px;那么 1rem = 10px; 先看下面的rem书写示例 <!DOCTYPE html> <html lang="en" style='font-size: 10px;'> <head> <…

Android的代码适配方案

public class DensityUtil { private DensityUtil(){ throw new AssertionError(); } /** * dp转px * @param context * @param dpVal * @return */ public static int dp2px(Context context, float dpVal){ return (int) TypedValue.applyDimension(TypedValue.COMPLEX_…

翻屏类 h5 适配方案：解决宽高自适应难题

表格图片等宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及应用原文: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 大漠的文章(简洁):https://github.com/amfe/article/issues/17 giuhub:https://github.com/…

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html…

H5 APP 页面移动端适配方案

H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03b57b5866 https://www.jianshu.com/p/2e20f868f385 https://github.com/BoleLee/mobile-web-pagefit https://segmentfault.com/a/1190000008767416 https://juej…

pc-H5 适配方案

一.介绍在前端项目页面开发中,尤其是H5页面开发,我们常常要适配各种分辨率的屏幕,才能让用户获得最好的体验效果.pc也是如此,很多页面是一屏,也是要适配各种尺寸的分辨率.这时候我们就需要对各种分辨率的手机电脑进行适配.那么用什么适配方案比较好呢?下面给大家介绍一种我觉得比较好的适配方案. 二.分辨率常用的分辨率可以大致分为这些,手机:320-750(320-768) ipad:750-1080(768-1080) pc:1080-1440 1440-1920 1920-2560 256…

android多分辨率多密度下界面适配方案

前言 Android 设计之初就考虑到了UI在多平台的适配,它本身提供了一套完善的适配机制,随着版本的发展适配也越来越精确,UI适配主要受平台两个因素的影响:屏幕尺寸 (屏幕的像素宽度及像素高度)和屏幕密度,针对不同的应用场景采用的适配方案也不一样,此文档仅针对Android4.0及以下版本http://www.jinhusns.com/Products/Download/?type=xcj 相关概念分辨率:整个屏幕的像素数目,为了表示方便一般用屏幕的像素宽度(水平像素数目)乘以像素高度表示,…

webapp：移动端高清、多屏适配方案（zz）

来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清…

移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

Lovesueee 发布于 8 月前移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍…

Android 屏幕适配方案

转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述大家在Android开发时,肯定会觉得屏幕适配是个尤其痛苦的事,各种屏幕尺寸适配起来蛋疼无比.如果我们换个角度我们看下这个问题,不知道大家有没有了解过web前端开发,或者说大家对于网页都不陌生吧,其实适配的问题在web页面的设计中理论上也存在,为什么这么说呢?电脑的显示器的分辨率.包括手机分辨率,我敢说分辨率的种类远超过A…

Android 目前最稳定和高效的UI适配方案

Android系统发布十多年以来,关于Android的UI的适配一直是开发环节中最重要的问题,但是我看到还是有很多小伙伴对Android适配方案不了解.刚好,近期准备对糗事百科Android客户端设计一套UI尺寸适配方案,可以和小伙伴们详细的聊一聊这个问题. Android适配最核心的问题有两个,其一,就是适配的效率,即把设计图转化为App界面的过程是否高效,其二如何保证实现UI界面在不同尺寸和分辨率的手机中UI的一致性.这两个问题都很重要,一个是保证我们开发的高效,一个是保证我们适配的成效:今…

移动web开发适配方案之Rem

移动端为什么要做适配移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手机做适配来达到近似的展示效果. 一般来说,UI只会给我们提供一份设计图,目前比较多的是参考手机淘宝的方案给一份750px宽的设计稿,而我们前端要做的就是在不同分辨率的手机上以同样的效果展示这份设计稿. 在讲适配方案之前,有几个基本的移动端开始相关的知识点得了解一下 rem单位: 说到rem这个单位就…

适用于hips ui的iPhoneX及以上适配方案

版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. 无适配情况自从iPhone X出了刘海屏后,对于我们前端是适配难度又更上一层楼.不知道你有没有遇到过如下情况 1.头尾嵌入边框 2.在适配了头尾之后,scroll框子没做适配,出现最后的内容别下方小黑条遮住的情况 3.适配了iPhoneX,却没有适配iPhoneXs Max 如果,你遇到过以上几…

基于Vue/React项目的移动端适配方案

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的亲测可用配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的是<h…

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代码: cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionSize函数的前两个参数是你想要在你的代码中使用的游戏分辨率,第三个参数就是你选择的适配方案.引擎中内置了5种…

cocos2d-x多分辨率适配方案：setDesignResolutionSize使用

1. setDesignResolutionSize使用方法及主要的三种适配模式在cocos2d-x 2.0里,提供了一个叫做setDesignResolutionSize的方法,直接一次设置就可以自动适配各种分辨率.这个方法的注释如下: enum ResolutionPolicy { kResolutionExactFit, kResolutionNoBorder, kResolutionShowAll, kResolutionFixedHeight, kResolutionFixedWid…

Unity2D多分辨率屏幕适配方案（转载）

一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个方案影响,可以完美和此方案配合使用. 先说明一些基本的概念: 1.屏幕的宽高比Aspect Ratio = 屏幕宽度/屏幕高度 2.Unity2D中摄像机镜头的尺寸决定了我们实际看到游戏内容的多少,在编辑器中我们…

Cocos2d-JS的屏幕适配方案

Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代码: cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionS…

【H5常用代码：适配方案1】的更多相关文章