移动端css适配
/* iphoneX、iphoneXs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
.bottom{bottom: 34px;}
.lastp{padding-bottom: 3.2rem;}
}
/* iphone Xs Max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
.bottom{bottom: 34px;}
.lastp{padding-bottom: 3.2rem;}
} /* iphone XR */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2){
.bottom{bottom: 34px;}
.lastp{padding-bottom: 3.2rem;}
}
移动端css适配的更多相关文章
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- 国内外移动端web适配屏幕方案
基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...
- 移动端font-size适配方案
概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- 移动端 css/html (box-flex)自适应、等比布局
移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
随机推荐
- python装饰器的构建
#!/usr/bin/python3# -*-coding:utf-8 -*-# @Time : 2019/9/27 17:04# @Author : v_ctaozhang import funct ...
- Kubernetes架构
一.Kubernetes 架构: Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. 1. Master 节点 Master 是 ...
- Asp.net Core深入一:数据库访问(Mysql为例)
一.数据库概述 1.一个DBContext操纵一个数据库 2.DbContext下的一个DbSet<Model类>关联一个表,但是也可以只写一个表,DbContext可以关联其他的表. 3 ...
- 阿里P8架构师谈:Restful、SOAP、RPC、SOA、微服务之间的区别(转载)
转载来源:https://youzhixueyuan.com/the-difference-between-restful-soap-rpc-soa-and-micro-service.html 内容 ...
- vue-cli@webpack@4打包分析命令
一.命令 npm run build --report 该命令在打包完之后,可以分析包的大小(如下图),从而分析那一块打包太大了可以进行优化处理.
- Kubernetes 相关镜像pull 不下来问题收集
1. 可在相关的镜像前添加 keveon 或者 mirrorgooglecontainers 就可以下载镜像, 然后在修改 tag docker pull mirrorgooglecontainers ...
- python标准库之shutil——可操作权限的文件操作库
转载自:https://www.jb51.net/article/145522.htm shutil模块提供了许多关于文件和文件集合的高级操作,特别提供了支持文件复制和删除的功能. 文件夹与文件操作 ...
- ZOJ Problem Set - 1004
1.翻译参考 http://liucw.blog.51cto.com/6751239/1198026 2.代码参考 http://www.cnblogs.com/devymex/archive/201 ...
- [转帖]使用Grafana和Telegraf监视VMware ESXi的方法
使用Grafana和Telegraf监视VMware ESXi的方法 2019-04-03 15:28:30作者:曾秀珠稿源:云网牛站 https://ywnz.com/linuxyffq/4660. ...
- python报错及处理 -- 不断总结
ModuleNotFoundError: No module named 'PIL' 解决方法: 运行命令:pip install Pillow IndentationError: expected ...