移动端适配方案阮一峰

2024-09-05

移动端适配方案-rem(基础篇)

常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局.具体参照阮一峰大神写的-Flex 布局教程:语法篇和实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool (语法篇) http://www.ruanyifeng.com/blog/2015/0

rem移动端适配方案

一. rem vs em 单位定义特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准二.js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面. <script> const oHtml = document.getElementsByTagName(

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

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

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

移动端适配方案 flexible.js

前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案,尽可能地让这种“意外”减到最少.没错今天的主角就是它“flexible.js” . flexible.js 之旅 flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,如入无人之境.说得那么浮,一点感觉都没有.不急,我们慢慢来,一步一步走进 flexible.js 神秘的世界. fl

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

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

整理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

【前端适配】vw单位移动端适配方案

近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美的解决了适配问题,下面是自己动手搭建后的一些整理. 创建项目 //vue-cli 3.0+ 版本 vue init webpack vue-vw-demo cd vue-vw-demo 安装必要插件 npm i postcss-aspect-ratio-mini postcss-px-to-viewport

h5 移动端适配方案思考

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

移动端适配方案以及rem和px之间的转换

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

web移动端适配方案

web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ios:6.1系统以上 android:2.1系统以上 1.2.什么是rem的 rem其实就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置.现在大部分浏览器默认font-size:16px.如果一个p标签想要

移动端适配方案（rem+flex）

为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem. 移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080*1920或1080*2340(全面屏). 所有元素都要用rem吗? 大部分时候都是如此,但也有一些例外,比如文字的font-size,可能直接设为如17px,直接写死.一些近乎占满整个宽度的banner,可能它的样式会是这样:(width: 100%;padding: 0 10px;),即左右宽度也

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> <

手淘的移动端适配方案flexible

基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应安装 flexible npm install lib-flexible --save 引入 flexible 在项目入口文件 main.js 中添加如下代码,引入 flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem 安装 px2rem-loader npm install px2rem-loa

【前端开发】移动端适配方案js，rem单位转换，640设计稿20px=1rem

! function() { var style = document.createElement("STYLE"), docEl = document.documentElement, header = document.getElementsByTagName("HEAD")[0], viewport = document.createElement("meta"), dpr = 0, isAndroid = navigator.appVer

移动端font-size适配方案(续)

概述之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用. 我上一篇博文主要有2个误区,下面我一一记下来. 这篇博文参考了移动端适配方案(下). 适配方案有多种适配方案: 百分比布局:高度和宽度用百分比.由于高度和宽度的百分比是按照父元素尺寸的,所以改动父元素会使子元素发生变化,非常难以维护. px布局:固定宽度,viewport缩放.就是全部用px,然后用js控制init

H5常用代码：适配方案1

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

小tips：使用rem+vw实现简单的移动端适配

首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 使用如下代码就能实现移动端的适配: html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } 100vw相当于浏

移动端适配--flexible.js

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px

web前端--移动端适配总结

转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码: <meta name = "viewport" content ="width=device-width, initial-scale=1.0"> 但是,很多小伙伴只是感性的认识:噢,我加了这行代码,然后页面的宽度就会跟我的设备宽度一致.然而,这种理解是很片面的.那

移动端适配方案阮一峰

热门专题