手机自适应的单位rem,与自适应网页的区别
一个网站有的会分为pc站和移动站,有的网站只有pc站,而现在更多的是自适应的站点。
现在针对自适应的网页设计有很多模板,如bootstrap,它会让你轻松定制一个只适应网站,而现在大多数的网站并不是靠程序员凭空开发的前端与后端,都会运用已经成熟的框架创建自己的网站,如一些集成很好的wordpress框架,和织梦dede等。
自适应的页面,只需要监测不同的屏幕尺寸,使用@media(),写出不同尺寸下的不同尺寸即可.
而现在更多的人使用手机,这就使网页的用户体验度更好,很多大公司都会采用pc站和移动站分开设计。
前端开发者会使用PX,em,rem等单位在设计网页中体现
在最开始的时候我会使用px,这样可以把UI设计稿一个px不差的,完美的设计出来,会使用@media做自适应调整,一个自适应的网站就设计好了。
REM单位:我想说REM单位更适应于制作移动端的网页
网上有很多版本的手机自适应布局的版本介绍
1.使用@media()做自适应
html{
font-size:1em;
}
@media only screen and (min-width: 371px){
html {font-size:66%;}
}
@media only screen and (min-width: 401px){
html {font-size: 80%;}
}
@media only screen and (min-width: 428px){
html {font-size: 50%;}
}
2.使用js控制元素font-szie的大小
<script type="text/javascript">
(function(e,t){var i=document,n=window;var l=i.documentElement;var r,a;var d,o=document.createElement("style");var s;function m(){var i=l.getBoundingClientRect().width;if(!t){t=540}if(i>t){i=t}var n=i*100/e;o.innerHTML="html{font-size:"+n+"px;}"}r=i.querySelector('meta[name="viewport"]');a="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";if(r){r.setAttribute("content",a)}else{r=i.createElement("meta");r.setAttribute("name","viewport");r.setAttribute("content",a);if(l.firstElementChild){l.firstElementChild.appendChild(r)}else{var c=i.createElement("div");c.appendChild(r);i.write(c.innerHTML);c=null}}m();if(l.firstElementChild){l.firstElementChild.appendChild(o)}else{var c=i.createElement("div");c.appendChild(o);i.write(c.innerHTML);c=null}n.addEventListener("resize",function(){clearTimeout(s);s=setTimeout(m,300)},false);n.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(s);s=setTimeout(m,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(e){i.body.style.fontSize="16px"},false)}})(750,750);
</script>
本段js代码适合设计稿宽度为750px,定义body的字体样式为body{font-size: 0.32rem;},以后写每个div的宽度,每个元素的字体大小,只用(它实际的像素除以100)rem,即可。
本人亲测可以使用.PS:这段js代码会检测你的屏幕尺寸大小,计算相应的根字体大小,达到很好的视觉体验。---间距合适,字体大小合适
手机自适应的单位rem,与自适应网页的区别的更多相关文章
- rem实现自适应
总结一下,rem实现自适应:用rem代替px,配合媒体查询设置font-size:n%. 首先,px是死的.若一律用px,那就会大的显得小,小的屏幕显得大.其次,rem是活的,通过设置字体大小可以引起 ...
- css中添加屏幕自适应方法(rem)
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- css3自适应布局单位vw,vh
css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- 视口viewport与单位rem的本质
结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- css 相对单位rem详解
CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...
- CSS3新的字体尺寸单位rem
CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...
- 使用 rem 作为单位使页面自适应设备宽度
一.新建 rem.js 文件,代码如下: export default function () { document.documentElement.style.fontSize = document ...
- 使用rem编写自适应屏幕网页造成div被span撑高的解决办法
原始代码: <html> <head> <meta charset="utf-8"> <meta content="ie=edg ...
随机推荐
- Python爬虫爬取爱奇艺电影片库首页
1 import time 2 import traceback 3 import requests 4 from lxml import etree 5 import re 6 from bs4 i ...
- C++设计模式 - 解析器模式(Interpreter)
领域规则模式 在特定领域中,某些变化虽然频繁,但可以抽象为某种规则.这时候,结合特定领域,将问题抽象为语法规则,从而给出在该领域下的一般性解决方案. 典型模式 Interpreter Interpre ...
- 【AI】『Suno』哎呦不错呦,AI界的周董,快来创作你的歌曲吧!
前言 缘由 Suno AI的旋风终于还是吹到了音乐圈 事情起因: 朋友说他练习时长两天半,用Suno发布了首张AI音乐专辑.震惊之余,第一反应是音乐圈门槛也这么低了,什么妖魔鬼怪都可以进军了嘛! 好奇 ...
- #树状数组,dp#SGU 521 North-East
题目 在平面上有 \(n\) 个点,现在有一个人要从某个点出发, 每次只能到达横纵坐标都超过原坐标的点,也就是 \(x_j<x_i,y_j<y_i\) 如果他要经过最多的点,那么哪些点是可 ...
- OpenHarmony之NAPI框架介绍
张志成 诚迈科技高级技术专家 NAPI是什么 NAPI的概念源自Nodejs,为了实现javascript脚本与C++库之间的相互调用,Nodejs对V8引擎的api做了一层封装,称为NAPI.可 ...
- 在DAYU200上实现OpenHarmony视频播放器
内容简介 本文介绍了如何使用ArkUI框架提供的video组件,实现一个具有简易播放器.通过VideoController控制器来控制倍速.全屏.进度调节等功能. 由于使用本地视频文件会影响App的包 ...
- C语言 05 变量与常量
变量 变量就像在数学中学习的 x,y 一样,可以直接声明一个变量,并利用这些变量进行基本的运算,声明变量的格式为: 数据类型 变量名称 = 初始值;(其中初始值可以不用在定义变量时设定) = 是赋值操 ...
- 【直播回顾】Hello HarmonyOS系列应用篇完美收官!
6月15日晚上19点,Hello HarmonyOS系列应用篇第七期直播 <分布式应用开发>,在HarmonyOS社群内成功举行.随着本系列直播最后一课的完美收官,开发者们在逐渐掌握技术知 ...
- [Java SE] 经典问题:超出Java Long型(8字节/64位)的二进制比特流数据如何进行大数的数值计算?
0 问题描述 经典问题:超出Java Long型(8字节/64位)的二进制比特流数据如何进行大数的数值计算? 近期工作上遇到了这个问题:需要将一个无符号数.且位长>=8字节(等于8字节时,首位b ...
- 重新点亮shell————文本搜索[九]
前言 简单整理一下文本搜索. 正文 文本搜索需要学下面: 元字符 扩展元字符 文件的查找命令find 例子1: 例子2(通配符): 例子3(正则表达): 例子4(可以根据文件类型匹配): 例子5(找到 ...