手机网页css字体,CSS深入浅出-动态REM(手机专用)
动态REM是手机专用的自适应方案
REM的值
1. CSS有很多长度单位
px 像素
em 一个"M"的宽度(一个汉字的宽度)
ex 一个"X"的高度
vh(viewport height) 视口高度
100vh == 视口高度
vw(viewport width) 视口宽度
100vw == 视口宽度
rem(root em) 根元素的font-size值
......
没错,REM就是根元素()的font-size的值
但要讲动态REM,就得再普及几个概念。
2. Chrome12像素法则
Chrome浏览器如果不调设置的话,默认的最小字号是12px
也就是说,Chrome不设置的话。html网页是无法在Chrome上显示比12px还要小的字体的,如果有,均已12px显示
3. 网页默认字体大小
根元素()的默认font-size是16px
综上所述,在默认情况下,1rem = 16px
手机端方案
1. 方案抉择
响应式?
虽然手机端的宽度都在300~500之间,但如果用了响应式,适配各种高机型会变得非常费时费力,而且图是大问题。
百分比布局(自适应宽度等)
百分比布局的宽度可以解决,但是高度怎么办?而且你都不知道宽度确切的值,所以也很难把高度和宽度关联起来。
整体缩放
保证了在各个机型上显示的比例
我觉得可以~
2. 整体缩放(动态REM)
其实使用vw作为尺寸单位最好,但是兼容性太差
所以我们选择rem作尺寸单位
动态REM主要利用了rem = html:font-size = viewportWidth
动态REM
动态REM主要利用了rem = html:font-size = viewportWidth
1. 利用JS动态调整REM
/*告诉浏览器页面别缩放*/
var pageWidth = window.innerWidth
/*浏览器当前页面宽度*/
document.write('')
/*把浏览器当前页面宽度写入的font-size中*/
接下来就可以用rem的值了
2. CSS代码(测试效果)
div{
width:0.5rem;/*宽度:页面宽度的1/2*/
height:0.5rem;/*高度:页面宽度的1/2*/
margin:0.25rem auto;/*上下边距:页面宽度的1/4*/
}
特点&解决方案
1. REM可以和其他单位同时存在
div{
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
}
2. 单位转换问题
所有rem都是小数,看起来眼花缭乱
不如把pageWidth改成pageWidth/100,但其实是不行的,因为Chrome默认最小font-size是12px
退而求其次,改成pageWidth/10,然后再把相应宽度*10就行了
3. 使用SCSS
使用SCSS可以写个函数,方便的将设计稿里的尺寸单位px直接转换成rem相应的值
安装SCSS(命令行)
$ npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")
$ touch ~/.bashrc
$ echo 'export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.bashrc
$ source ~/.bashrc
$ npm i -g node-sass
$ mkdir ~/Desktop/scss-demo
$ cd ~/Desktop/scss-demo
$ mkdir scss css
$ touch scss/style.scss
$ start scss/style.scss
$ node-sass -wr scss -o css
"$"是命令行自带的,别复制!!
使用SCSS
编辑 scss 文件就会自动得到 css 文件
在 scss 文件里添加
@function px/*左边是名称,可改*/( $px ){
@return $px/$designWidth*10 + rem;
/*以实际像素值➗当前页面宽度✖️rem的转换率 再加rem的后缀(字符串)*/
}
$designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一,就杀死设计师,换个新的。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
完~累死了
手机网页css字体,CSS深入浅出-动态REM(手机专用)相关推荐
- 手机网页html字体很小的解决办法
手机网页html字体很小的解决办法: <meta name="viewport" content="width=device-width" initial ...
- css font-family css 字体 css 字体样式
css font-family 大全 css 常用字体样式 css 字体 , css 字体样式 好看的字体样式 好看的字体样式大全 参考地址: http://qq1368391900.git ...
- android手机可以换字体吗,最新版安卓手机怎么换字体?
手机是我们每天都要面对的,经常需要打开,手机屏幕是和我们最直观的交互界面,是不是看惯了自带的那个方方正正的字体,觉得不是那么美观呢.可爱的女生是不是也想自己的字体变得更加漂亮呢.简单的几部操作,就能让 ...
- css:网页引入字体@font-face以及动态加载字体
css:网页引入网络字体@font-face <style >/* 引入字体 */@font-face {font-family: "站酷高端黑 Regular";fo ...
- 支付宝手机网页版支付、支付异步回调、退款
一.微信小程序订单生成支付宝链接至浏览器支付 整体流程 一.微信小程序订单生成支付宝链接至浏览器支付 1.场景需求 2.准备工作 3.搭建项目环境以及实现 二.支付宝支付异步通知 三.退款 1.退款 ...
- css 字体无法小于10号,css3让手机网页字体小于12px
手机端网页,可以说是寸土寸金,经常会遇到文字多一个就掉入第二行,这时要让字体小于12px就小不了了,特别是谷歌浏览器,就算是在css里写font-size:10px;那么还是显示12px的,那咋办?? ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- [css] 让网页的字体变得清晰,变细用CSS怎么做?
[css] 让网页的字体变得清晰,变细用CSS怎么做? 全家桶:-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: graysca ...
- 【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
最新文章
- 先序,中序,后序线索二叉树
- typescript获取数据库数据_肿瘤药敏多组学数据库(GDSC)的数据介绍和获取
- Marketing Cloud launchpad中的meta标签
- spark 2.4安装
- 【转】分布式websocket服务器
- android paint 线宽_android Paint 设置线宽setStrokeWidth()的单位
- Linux知识体系之路径属性与目录
- 用友U8 13.0运维及操作手册全版
- Linux GCC编译详细
- MybatisCodeHelperPro的使用
- 搭建高性能日志服务器,rsyslog日志服务器搭建
- python类方法重写和重载的区别_python 重载和重写的区别
- UI基本控件(一):UIScrollView
- DirectX加速不可用、已禁用的解决方法(转载)
- 计算机产品选型与配置,高校校园网设备的选型和配置.DOC
- 跟小静读CLR via C#(18)——Enum
- 如何同时训练左手灵活性和音阶思维
- 微信小程序用户昵称表情字符储存的方案
- 数据中台建设的价值及数据中台架构
- 华为光猫HG8240的简单配置过程