/* 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. 接口测试 dubbo 接口测试

    dubbo是阿里巴巴开源的一套rpc方案,以为理念很契合微服务,这几年很火,用户里面不凡京东,当当,去哪儿等大公司.rpc场景   dubbo架构   官网也提供了一个很简单实用的demo来演示dub ...

  2. 【Linux】部署NTP时间同步服务器

    1. 查看机器的Linux版本 查看集群内所有服务器的linux版本,确保相同,不要跨大版本. [root@bigdata111 ~]# cat /etc/redhat-release CentOS ...

  3. cmake 在mac系统的安装

    CMake是一个比make更高级的跨平台的安装.编译.配置工具,可以用简单的语句来描述所有平台的安装(编译过程).并根据不同平台.不同的编译器,生成相应的Makefile或者project文件.本文主 ...

  4. python-文件常用操作

    文件内建函数和方法: open()——打开文件 read()——输入 readline()——输入一行 seek()——文件内移动 write()——输出 close()——关闭文件 练习:

  5. Tomcat: has been normalized to [null] which is not valid

    环境 tomcat 8.5 原因 在使用相对路径加载配置文件时,如果相对路径超出了 tomcat 容器的根目录,那么 tomcat 会提示 xxx has been normalized to [nu ...

  6. T100——单据别的新增、修改设置

    何为单据别,例如下图,新增的时候开窗选择单据别: 新增单据别: 1.首先在azzi600 系统分类码维护作业里面新增新的系统分类码(在系统分类码24下新增),如图: 2.在azzi910 作业基本数据 ...

  7. 搞懂ZooKeeper到底是做啥的

    一.ZooKeeper是啥 ZooKeeper概念 ZooKeeper是一个开源的分布式协调服务(a service for coordinating processes of distributed ...

  8. Java多线程(二):Thread类

    Thread类的实例方法 start() start方法内部会调用方法start方法启动一个线程,该线程返回start方法,同时Java虚拟机调用native start0启动另一个线程调用run方法 ...

  9. 与 QWidget 有关的 Qt 可视化组件的继承关系图

    与 QWidget 有关的 Qt 可视化组件的继承关系图

  10. 4.图片左轮播图(swiper)

    一.html部分 二.js部分 三.源代码部分 <body> <div id="box"> <img src="imges/111.jpg& ...