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的尺寸来的: 一个手机页面在这里预 ...
随机推荐
- 算法复杂度图示&JavaScript算法链接
https://juejin.im/post/5c9a1d58e51d4559bb5c6694
- 汇编语言从入门到精通-5微机CPU的指令系统2
微机CPU的指令系统 5.2.2 标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 a.清进位指令CLC(Clear Carry Flag):CF ...
- 【剑指Offer面试编程题】题目1356：孩子们的游戏(圆圈中最后剩下的数)--九度OJ
题目描述: 每年六一儿童节,JOBDU都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为JOBDU的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈. ...
- 03.Scala编程实战
Scala编程实战 1. 课程目标 1.1. 目标:使用Akka实现一个简易版的spark通信框架 2. 项目概述 2.1. 需求 Hivesql----------> sel ...
- HTML5模板引擎 Thymeleaf 教程（转）
原文:http://www.open-open.com/lib/view/open1383622135586.html Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非 ...
- IDEA工具java开发之 常用插件 git插件 追加提交 Code Review==代码评审插件 撤销提交 撤销提交 关联远程仓库 设置git 本地操作
◆git 插件 请先安装git for windows ,git客户端工具 平时开发中,git的使用都是用可视化界面,git命令需要不时复习,以备不时之需 1.环境准备 (1)设置git (2)本地操 ...
- unique 验证 criteria 使用
model array('code', 'unique', 'criteria' =>array('condition' =>'schoolid=:schoolid','params' = ...
- ffmpeg使用C语言sdk实现抽取视频中的视频数据
主要使用函数 特征码:Start code 解码的一些视频参数,分辨率和帧率:SPS/PPS ffmpeg获取SPS/PPS:codec->extradata 实例 #include <s ...
- Scrapy 框架结构及工作原理
1.下图为 Scrapy 框架的组成结构,并从数据流的角度揭示 Scrapy 的工作原理 2.首先.简单了解一下 Scrapy 框架中的各个组件 组 件 描 述 类 型 EN ...
- 分析配置DispatcherServlet类时load-on-startup标签作用
<servlet> <servlet-name>DispatcherServlet</servlet-name> <servlet-class>org. ...