base是什么设备,base是什么单位

  

     

  

  首先,我们为什么要适配移动端?不仅仅是为了给用户更好的体验(原因是我们懒,不想给移动端设置第二套代码)。因此,用户可以在桌面上或手机、iPad等移动终端上访问公司官网。   

  

  以下css单位为CSS单位。我们在适配移动终端的时候,小元素的宽度和高度可以使用绝对元素,大元素的宽度和高度尽量使用相对元素。   

  

  绝对单位   

  

  Px :像素像素Px :点磅PC 3360picas送卡mm :厘米cm mm :毫米mm :英寸q 3360四分之一毫米1/4毫米相对单位   

  

  % :% Em3360元素计根据文档字体计算大小Rem3360根元素计根据根文档(body/Html)字体计算大小ex3360文档字符的高度“x”ch :文档编号的宽度“0”VH :视图高度可视范围高度vw3360视图宽度可视范围宽度vmin :视图最小可视范围宽度或高度,哪个较小,vmax 3336 0视图最大,宽度或。框{ width : calc(100%-10px 2 rem)}   

  

  媒体查询@media可以针对不同的屏幕大小设置不同的样式,尤其是需要设置响应式页面的时候,@media非常有用。当您重置浏览器大小时,页面将根据浏览器的宽度和高度重新呈现。   

  

  运算   

  

  @media mediatype and|not|only(媒体功能){ CSS-Code;}css语法   

  

  /* iphone 5/5s/5se */@媒体屏幕和(max-width :569 px){ top : 7%;左: 18%;}/* iphone 6/7/8 */@媒体屏幕和(min-width:569px)和(max-width :668 px){ top : 12%;左: 20%;}/* iphone 6p/7p/8p */@媒体屏幕和(min-width:668px)和(max-width :737 px){ top : 14%;左: 20%;}/* iphone x */@媒体屏幕和(min-width:737px)和(max-width :813 px){ top : 12%;左: 21%;}/*ipad*/@media screen和(min-width:813px)和(max-width :1025 px){ top : 22%;左: 21%;}/* ipad pro */@媒体屏幕和(min-width :1024 px){ top : 25%;左: 21%;}Flex和Grid布局前端学生在编写UI图时常用的布局应该是Flex和Grid布局。这也是适应移动终端时的必要技能。   

  

  因为这两个知识点内容较多,所以这里推荐三个教程链接,供大家参考。   

  

  阮一峰:CSS网格网络布局教程(http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html)阮一峰:CSS Flex布局教程-语法(http://www.ruanyifeng.com/blog/2015/07/阮一峰,flex-grammar.html: CSS Flex布局教程-示例(https://www.ruanyifeng.com/blog/2015/07/flex-examples.html)REM定义:根元素的字体大小。   

  

  这个单元的定义和em类似,只是em是相对于父元素的,而rem是相对于根元素的。Rem被定义为根元素的字体大小,其值和px之间的关系应该相对于根元素的字体大小来计算。例如,设置根元素font-size=16px意味着1rem=16px。   

  

  根据这一特点,根元素的字体大小可以根据设备的宽度动态设置,使得以rem为单位的元素在不同的终端上呈现出相对一致的视觉效果。   

  

  选择一个设备的宽度作为基准,设置它的根元素大小,其他设备按照这个比例计算它的根元素大小。比如iPhone6根元素font-size=16px。   

  

  根元素字体大小公式:wi   

dth/fontSize = baseWidth/baseFontSize 其中,baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小,width, fontSize为所求设备的宽度及其根元素大小

  

动态设置根元素fontSize

  

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script> /** * 以下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小 * 当设备宽度为375(iPhone6)时,根元素font-size=16px; 依次增大; * 限制当为设备宽度大于768(iPad)之后,font-size不再继续增大 * scale 为meta viewport中的缩放大小 */ (function (doc, win) { var docEl = win.document.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; /** * ================================================ * 设置根元素font-size * 当设备宽度为375(iPhone6)时,根元素font-size=16px; × ================================================ */ var refreshRem = function () { var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; console.log(clientWidth) if (!clientWidth) return; var fz; var width = clientWidth; fz = 16 * width / 375; docEl.style.fontSize = fz + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, refreshRem, false); doc.addEventListener('DOMContentLoaded', refreshRem, false); refreshRem(); })(document, window);</script></html>rem计算(px2rem)

  

对于需要使用rem来适配不同屏幕的元素,使用rem来作为CSS单位,为了方便,可以借助sass写一个函数计算px转化为rem, 写样式时不必一直手动计算。

  

/* * 此处 $base-font-size 具体数值根据设计图尺寸而定 * flexible中设置的标准是【fontSize=16px, when 屏幕宽度=375】,因此,按此标准进行计算, * 若设计图为iPhone6(375*667)的二倍稿,则$base-font-size=32px * */ @function px2rem($px, $base-font-size: 32px) { @if (unitless($px)) { @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you"; @return px2rem($px + 0px); // That may fail. } @else if (unit($px) == rem) { @return $px; } @return ($px / $base-font-size) * 1rem;}// 使用,eg:font-size: px2rem(18px);vite、vue-cli如果同学们的项目使用的是vue或vite构建工具那就更方便了。

  

安装 amfe-flexible、postcss-pxtorem插件

  

npm i amfe-flexible -Snpm i postcss-pxtorem -D配置main.js入口文件

  

import 'amfe-flexible/index.js';项目根目录新建 postcss.config.js 文件

  

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 75, // 换算的基数 默认为37.5,一般不建议修改它,使用vant ui框架中也是默认37.5 // 忽略转换正则匹配项,插件会转化所有的样式的px。比如引入了三方UI,也会被转化. //项目中有不需要自动转换成PX的样式,就在此添加,如: .vant 表示 .vant 开头的都不会转换 selectorBlackList : <>, propList: <'*'>, //属性的选择器,*表示通用 }, },};

相关文章