关于h5屏幕适配
1)使用rem进行等比缩放
rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小
比如根元素(html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px;
如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小,一般是12px;
原理分析:rem屏幕适配就是一种等比缩放效果
一般来说设计稿是基于p6(750),或者是p5(640)的尺寸,以p6为例子:
设置:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scale=no">
(function (doc, win) {
var docEl = doc.documentElement
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) {
return
}
if (clientWidth >= 750) { // 避免无无限放大
docEl.style.fontSize = '100px'
} else {
docEl.style.fontSize = 100*(clientWidth / 750) + 'px' // 设置根元素的font-size
}
}
if (!doc.addEventListener) {
return
}
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
一般是配合scss 进行使用:
mixin.scss
@function px2rem($val) {
@return #{$val*2/100}rem;
}
xxx.vue
@import '~/sass/mixin.scss'; .des-word {
width: px2rem(30)
height: px2rem(20);
line-height: px2rem(20);
text-align: left;
color: #434c5f;
letter-spacing: 0;
word-break: break-all;
}
存在的问题:对于文本段落来说,一般是不建议使用rem进行设置的,字体的大小和字体宽度,并不成线性关系,所以字体大小不能使用rem。
普遍的做法是使用媒体查询,固定几种字体大小【根元素是html ,如果一个元素设置为xrem那么他的大小是根据根元素字体大小进行变化的】
@media screen and (min-width: 320px) {
body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
body {font-size: 18px}
}
@media screen and (min-width: 641px) {
body {font-size: 20px}
}
div{
font-size:1.5em
}
字体大小是可以继承的,这就是意味着,可以使用em ,进行字体大小设置。
em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小
比如父元素font-size:12px;
自身元素如果写成:font-sise:2em;则自身元素用px表示就是24px(相对父元素字体大小);
但是自身元素设置:width:2rem,那么自身元素用px表示就是48px(相对自身字体大小);
2)使用vw进行适配布局
相对于视口的宽度。视口被均分为100单位的vw
如果屏幕宽度为200px,那么1vw=2px
关于h5屏幕适配的更多相关文章
- 移动设备 h5屏幕适配
<meta name="HandheldFriendly" content="true"><meta name="MobileOpt ...
- 那些H5用到的技术(6)——屏幕适配
前言长屏适配单页适配参考 前言 曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开 ...
- h5移动端屏幕适配
1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- H5网页适配 iPhoneX,就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
- 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
- Android屏幕适配笔记
1.限定符 为了适配不同屏幕大小的android手机或android平板,有时候就需要利用限定符来为不同的屏幕设定不同的布局文件,在一般情况下我们都是在layout文件夹下为某个活动准备一个默认的布局 ...
- iOS开发点滴:iPhone屏幕适配
最近开始做iOS开发,遇到一些小问题和解决方法,记录下. 今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...
- IOS开发之绝对布局和相对布局(屏幕适配)
之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...
随机推荐
- bind出现Address already in use解决方法
在socket函数和bind函数之间加入一段代码: // 建立服务器端socket if((server_sockfd = socket(AF_INET, SOCK_STREAM, 0))<0) ...
- iOS UI-UIScrollView控件实现图片轮播 (UIPageControl-分页指示器)
一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: #import "ViewController.h" #define HM ...
- OC Foundation框架—集合
Foundation框架—集合 一.NSArray和NSMutableArray (一)NSArray不可变数组 (1)NSArray的基本介绍 NSArray是OC中使用的数组,是面向对象的,以面向 ...
- PHP:第三章——PHP中的递归函数
<?php header("Content-Type:text/html;charset=utf-8"); function A(){ static $i = 0; ++$i ...
- POJ 2251 bfs
DESCRIPTION:给你一个三维的迷宫.问你是否能从起点走到终点.如果能,输出最小步数.对我来说难得就是我没有想到怎么把他给你的三维图转换成map.恩..好像解题报告上说.只要是这种的最短路都要用 ...
- git and github问题集锦
本人遇到的:
- 比较强大 优秀的开源框架 :Android图片加载与缓存:Android Glide 的用法
使用Android Glide,需要先下载Android Glide的库,Android Glide在github上的项目主页: https://github.com/bumptech/glide . ...
- 2017广东工业大学程序设计竞赛决赛 Problem E: 倒水(Water) (详解)
倒水(Water) Description 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水 ...
- 201621123010《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...
- beta阶段贡献分配实施
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2281] 要求1 每位组员的贡献分值 刘莹莹 王玉潘 潘世维 周昊 赵美增 ...