css的手机适配
在html篇里提到设置视口宽度和设备宽度，固定的meta配置就是写死的，死记硬背
应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化，而高度却没有办法跟随比例变化，也就是宽高比，比如在手机上要一行上排列三个div放正方形的三个div，要怎么做，三个div浮动排列后各自设置width为33.3%，那高度呢，在pc端可以直接100*100，但是手机不行，不等比排列太难看了，并且pc的字体就是固定的16px或者14px，但是手机有大小的区别，也应该根据手机变化，这就是手机适配要解决的
两个方案
- 一个是rem
- 一个vw，vh的css3的api
在css里有px和em还有rem
- px就是固定的，是指一个视口像素，而不是设备像素，很高深，不用深究，px是个固定的计量单位
- em是相对父元素的字体大小的大小，比如父元素的字体大小是16px，那1em就是16px，他不是个固定值，是个相对值，非常不常用，用处就是在一些文章的段落前用2em作为两个字的缩进
- 而rem也是个相对值，但相对的不是父元素的字体大小，而是html标签的字体大小，而html就是跟手机宽度相等的存在，也就是说只要把html的字体大小设置为375px，那1rem就是375px，再把div高度设置成0.33rem,这样就可以实现永远正方形的div，这就是传说中的rem适配
rem的关键点就是如何去给html标签设置跟设配宽度一样的字体大小，而现实是只能用js去实现，而且为了更好的计算，不能计算为1rem去等于设备宽度，这样如果要10px就是零点零几的rem，正确的做法是让html等于10rem，15rem，20rem，我一般是用15rem，就是375/15=25，也就是1rem=25px，16px的正常字体大小就是16/25约等于0.65rem，rem的单位是可以代替所有的px的存在的，比如padding，margin，border，img-width等等都是可以用rem的，这样不管在怎么样大小的手机上大小，任何一个元素的宽高比都是一样的，也就是等比缩放
// 如果看不懂js写了什么，也不用管，固定写法，写进去就可以用了
window.onload = function(){
/* 第一个参数是你想让 1rem 等于多少像素，第二个参数是设计稿的宽度 */
getRem(50,750)
};
window.onresize = function(){
getRem(50,750)
};
function getRem(prem,pwidth){
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
document.documentElement.style.fontSize = prem/pwidth*oWidth + "px";
}
#aa{
width:5rem;
font-size:0.6vw;
...
}
上面讲了css的3个计量单位，而css3出现了一个新的计量单位vw , vh，这两个是相对于手机设备宽度的固定值，相对的固定值怎么理解呢，就是不管在任何设备，100vw就是等屏幕一样宽，100vh就是跟屏幕一样高，所以宽高都是33.3vw的div就是一个永远固定的正方形
#aa{
width:33.3vw;
font-size:5vw;
...
}
还可以把vw和rem合起来使用，就不用写js的rem了
html {
font-size: calc(100vw / 3.75);
}
body {
font-size: 0.14rem;
}
2020/03/04补充
今天甲方说有个人的手机用画布生成的海报里的手机号码超出了画布，但是这个手机号码的文字大小不是固定的，是计算的，不应该会出现超出画布的可能行，打印出来的计算结果也跟我一样是40px，突然意识到这是手机被设置了文字倍数，因为有些人近视什么的，于是就研究了下怎么解决这个问题
<script type="text/javascript">
var rem = 50 / 750 * document.documentElement.clientWidth;
document.documentElement.style.fontSize = rem + 'px';
</script>
<body style="font-size: 0.6rem;margin: 0;">
<span style="font-size: 16px;" id="a">我</span>
<span style="font-size: 1rem;" id="b">我</span>
<span style="font-size: 10vw;" id="c">我</span>
<div style="width: 16px;" id="d"></div>
<div style="width: 1rem;" id="e"></div>
<div style="width: 10vw;" id="f"></div>
</body>
在手机浏览器打开上面的网页，打印出当前window的宽度和几个dom元素的宽度，然后再放大或者缩小系统字体，结果的到这个答案
- window的宽度不会改变
- font-size属性都会改变
- width属性用rem的会改变
如何让修改了系统的用户也
- 宽高都用px或vw-vh去做
- 对比上面的#a和#d的宽度，计算出放大或者缩小的比例，然后把原本的字体大小适配方案改成百分比，如下，然后给body添加字体大小，大概是
0.6/(2-比例)
// 旧
<span>我</span>
<span style="font-size: 0.6rem">我</span>
<span style="font-size: 0.7rem">我</span>
<span style="font-size: 0.8rem">我</span>
// 新
<span>我</span>
<span style="font-size: 100%">我</span>
<span style="font-size: 120%">我</span>
<span style="font-size: 140%">我</span>
适配问题还有，查看文章
- 1px问题
- iphoneX适配
- 横屏适配
// JavaScript检测横屏
window.orientation:获取屏幕旋转方向
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋转180度
console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
console.log('横屏');
}
});
// CSS检测横屏
@media screen and (orientation: portrait) {
/*竖屏...*/
}
@media screen and (orientation: landscape) {
/*横屏...*/
}
- 图片模糊问题
.avatar{
background-image: url(conardLi_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.avatar{
background-image: url(conardLi_2x.png);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.avatar{
background-image: url(conardLi_3x.png);
}
}
css的手机适配的更多相关文章
- 手淘的flexible.js解决手机适配问题
如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...
- css 手机适配
手淘H5移动端适配方案flexible源码分析 移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看 ...
- Bootstrap3简单好用，轻松实现手机适配
个人官网http://FansUnion.cn,前端使用Bootstrap框架.大部分的样式,轻松就实现了. 只是呢,关于导航条,被无数网友吐槽了. 通过手机访问时,导航条把屏幕给完全占居了 ...
- Android手机适配——UI图片适配
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/50727753 在Android项目当中,drawable文件夹都是用来放置图片资源 ...
- CSS：手机页面，常用字号和布局（工作中用）
{literal} {/literal} 公用css .cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;} .border1-to ...
- 利用Html.css OPPO手机导航菜单的制作解析
<body> <div id="top" class="auto"> <div class="nav"> ...
- 关于手机适配中的rem的学习随笔
githup 下载地址 :https://github.com/comjustforfun/remformobile adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板初始化的时候 ...
- css横竖屏适配
Css做到横竖屏适配:定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orie ...
- js和css实现手机横竖屏预览思路整理
实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预 ...
随机推荐
- 将UIImage转换成圆形图片image
建议写成UIImage分类,如下: .h //变成圆形图片 - (UIImage *)circleImage; .m //变成圆形图片 - (UIImage *)circleImage { // NO ...
- QT无法读入txt文件内容
用vs写QT无法利用相对路径读入txt文件,应将此文件加入到资源文件中.
- 8个问题全面了解5G关键技术Massive MIMO
1 什么是Massive MIMO Massive MIMO(大规模天线技术,亦称为Large Scale MIMO)是第五代移动通信(5G)中提高系统容量和频谱利用率的关键技术.它最早由美国贝尔实验 ...
- 学习笔记（4）- DQN
宋皓宇 张伟男刘挺. (2018). 基于DQN的开放域多轮对话策略学习. 中文信息学报, 32(7), 99. http://jcip.cipsc.org.cn/CN/abstract/articl ...
- day22-Python运维开发基础(正则函数 / 异常处理)
1. 正则函数 # ### 正则表达式 => 正则函数 import re # search 通过正则匹配出第一个对象返回,通过group取出对象中的值 strvar = "5*7 9 ...
- list的三个子类的特点
- OPCDA通信--工作在透明模式下的CISCO ASA 5506-X防火墙配置
尊重原创,转发请声名 inside OPCSERVER 一台 outside OPCCLIENT 一台 route模式 配置没成功,放弃,采用透明模式 !----进入全局配置-- configure ...
- 十七 Spring的JDBC模版：使用开源连接池，DBCP,C3P0
DBCP的配置以及使用 引入jar包
- 《React后台管理系统实战 零》：基础笔记
day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react脚手架创建项目 2). 开发环境运行: npm s ...
- 一个Win32程序的进化------转载
一个Win32程序的进化 转载 weixin_34273046 发布于2017-11-15 10:53:00 阅读数 10 收藏 展开 一．为什么要学Win32 要回答这个问题,我们就要先搞清 ...