/* 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适配的更多相关文章

  1. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  2. 国内外移动端web适配屏幕方案

    基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...

  3. 移动端font-size适配方案

    概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...

  4. 移动端H5适配方法(盒子+图片+文字)

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  5. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  7. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

  8. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  9. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

随机推荐

  1. go http server 编程

    第一种:最简单的 package main import ( "fmt" "log" "net/http" ) func myHandler ...

  2. 【计算机视觉】背景建模之PBAS

    本文是根据M. Hofmann等人在2012年的IEEE Workshop on Change Detection上发表的"Background Segmentation with Feed ...

  3. 用maven建立一个工程

    建立java工程 mvn archetype:generate -DgroupId=cn.maxhou.demo -DartifactId=myapp -DarchetypeArtifactId=ma ...

  4. Linux三剑客之sed深度实践讲解(上)

    sed sed 是Stream Editor(流编辑器)缩写,是操 作过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行. 2.增删改查 2.1 增 a 追加文本到指定行后 i 插入文本到指 ...

  5. firewall-cmd 的简单使用 进行端口转发的使用

    今天本来想用 ssh 做端口转发 但是命令死活想不起来了.. 没办法改用firewall-cmd 来进行处理 方法: 1. 首先不能关防火墙 systemctl enable firewalld sy ...

  6. Idea 控制台Tomcat乱码设置

    找到tomcat安装目录,进入conf目录,找到logging.properties文件 把默认的 java.util.logging.ConsoleHandler.encoding = UTF-8 ...

  7. Educational Codeforces Round 68 (Rated for Div. 2)补题

    A. Remove a Progression 签到题,易知删去的为奇数,剩下的是正偶数数列. #include<iostream> using namespace std; int T; ...

  8. django CBV装饰器 自定义django中间件 csrf跨站请求伪造 auth认证模块

    CBV加装饰器 第一种 @method_decorator(装饰器) 加在get上 第二种 @method_decorator(login_auth,name='get') 加在类上 第三种 @met ...

  9. X86逆向4:VMP壳内寻找注册码

    本节课将讲解一下重启验证,重启验证在软件中也是非常的常见的,重启验证的原理很简单,用户在注册界面输入注册码以后程序会自动将输入的注册信息保存到配置文件中,这里可能保存到注册表,也可能使用INI文件来保 ...

  10. Spring实战(九)AOP概念以及Spring AOP

    1.横切关注点(cross-cutting concern) 软件开发中,散布于应用中多处的功能被称为横切关注点,如事务.日志.安全. 横切关注点从概念上是与应用的业务逻辑相分离的(但是往往会直接嵌入 ...