美文网首页
css移动端自适应

css移动端自适应

作者: 一名有马甲线的程序媛 | 来源:发表于2018-01-04 14:34 被阅读17次

在页面中引入如下css即可

@charset "UTF-8";
/*
 * 设置适配分辨率宽度
 * 最小分辨率的10px为1rem
 */
@media screen and (min-width: 1080px) {
  html {
    font-size: 46px; } }

@media screen and (min-width: 720px) and (max-width: 1079px) {
  html {
    font-size: 46px; } }

@media screen and (min-width: 600px) and (max-width: 719px) {
  html {
    font-size: 36px; } }

@media screen and (min-width: 540px) and (max-width: 599px) {
  html {
    font-size: 36px; } }

@media screen and (min-width: 480px) and (max-width: 539px) {
  html {
    font-size: 36px; } }

@media screen and (min-width: 320px) and (max-width: 479px) {
  html {
    font-size: 36px; } }

@media screen and (min-width: 240px) and (max-width: 319px) {
  html {
    font-size: 20px; } }

@media screen and (max-width: 240px){
  html {
    font-size: 20px; } }

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

html * {
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent; }

ins, a {
  text-decoration: none; }

input {
  outline: 0;
  -webkit-appearance: none; }

fieldset, img {
  border: 0; }

.glimmer-perspective {
  perspective: 1000;
  -o-perspective: 1000;
  -ms-perspective: 1000;
  -moz-perspective: 1000;
  -webkit-perspective: 1000; }

.glimmer-fix {
  perspective: 1000;
  -o-perspective: 1000;
  -ms-perspective: 1000;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  backface-visibilit: hidden;
  -o-backface-visibilit: hidden;
  -ms-backface-visibilit: hidden;
  -moz-backface-visibilit: hidden;
  -webkit-backface-visibilit: hidden;
  -webkit-transform-style: preserve-3d; }

自适应css代码,点击下载

相关文章

  • 前端技能

    css (flex布局 移动端自适应适配 css3动画 css预处理器less/sass) js (re...

  • 移动端

    移动端开发和 PC 端开发有哪些区别 移动端 考虑手机兼容性 使用触屏事件 布局自适应rem 动画处理CSS3 移...

  • css移动端自适应

    在页面中引入如下css即可 自适应css代码,点击下载

  • web前端 —— 移动端知识的小总结

    一.css部分 1.meta标签 移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端...

  • html5前端开发笔记-个人中心

    简单的css自适应PC端 移动端 一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,...

  • 2019-04-02

    移动端自适应 100px=1rem

  • web自适应

    简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...

  • CSS新手向的知识点<五>

    阅读本篇文章,你将大致了解到手机专用的自适应方案--移动端REM的应用 什么是rem css中长度单位有很多,比如...

  • 移动端reset.css

    移动端resset.css

  • 从面向对象思想的角度来认识前端

    一提到前端,自然会听到h5,css3,自适应,移动端等等。给人的感觉要么杂乱,要么就是更新太频繁,学习速度跟不上,...

网友评论

      本文标题:css移动端自适应

      本文链接:https://www.haomeiwen.com/subject/kzernxtx.html