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代码,点击下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容