css移动端自适应

在页面中引入如下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移动端自适应)