移动端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前端开发人员,运用开源 ...
随机推荐
- Linux 用户管理 与 文件权限
Linux 用户管理 与 文件权限 用户组操作 1.groupadd命令 groupadd [-g -o] gid group 各个选项具体含义如下: -g:指定新建用户组的GID号,该GID号必须唯 ...
- Data Exfiltration with DNS in MSSQL SQLi attacks
DNS解析过程 DNS解析过程 DNS 查询的过程如下图1所示. 图1 文字举例说明: 假定浏览器想知道域名xprp8i.dnslog.cn的IP地址. 1.浏览器先向本地DNS服务器进行递归查询. ...
- 纪录一次left join一对多关系而引起的BUG
纪录一次left join一对多关系而引起的BUG MySQL(11)---纪录一次left join一对多关系而引起的bug BUG背景 我们有一个订单表 和 一个 物流表 它们通过 订单ID 进行 ...
- 图表:WebChartControl
#region 画统计图 /// <summary> /// 画统计图 /// </summary> private void LoadWebChartControl() { ...
- python pip换源方法
以下资料来源于网络: pip国内的一些镜像 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ust ...
- POJ 3207 【2-SAT入门题 + 强连通分量】
这道题是我对于2-SAT问题的入门题:http://poj.org/problem?id=3207 一篇非常非常非常好的博客,很详细,认真看一遍差不多可以了解个大概:https://blog.csdn ...
- 二分图的最大匹配以及带权匹配【匈牙利算法+KM算法】
二分图算法包括 匈牙利算法 与 KM算法. 匈牙利算法 在这里写上模板. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 #include< ...
- 小记--------maxwell启动失败解决
查看报错日志信息: com.github.shyiko.mysql.binlog.network.ServerException: Could not find first log file name ...
- Spring4学习回顾之路06- IOC容器中Bean的生命周期方法
SpringIOC容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行特定的任务! Spring IOC容器对Bean的生命周期进行管理的过程: -通过构造器或者工厂方法创建 ...
- 石子合并(直线版+环形版)&(朴素写法+四边形优化+GarsiaWachs算法)
石子合并-直线版 (点击此处查看题目) 朴素写法 最简单常见的写法就是通过枚举分割点,求出每个区间合并的最小花费,从而得到整个区间的最小花费,时间复杂度为O(n^3),核心代码如下: ; i < ...