html自动适配手机还是电脑,html页面手机和电脑显示不一致

问题描述

想让html网页在手机和电脑显示时,元素都是居中的,但是我不太会前端,试过一些网上找的居中的方法还是不行,只好将长和宽以及边距等都写死,让手机端的显示是居中的(因为该页面访问基本都是手机端用户)

电脑页面

手机页面

问题出现的环境背景及自己尝试过哪些方法

使用过的方法:

1.设置left,top的百分比

main{

position: absolute;

top: 50%;

left: 50%;

margin-top: -5em;

margin-left: -9em;

width: 18em;

height: 10em;

}

2.

main{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 1em;

}

相关代码

html代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

DADAGO&MVP快递单号查询

body {

color: #1F7B67;

font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;

text-align: center;

background-image: url('../static/pictures/dada2.jpg');

position: fixed;

top: 35%;

left: 14%;

width: 100%;

height: 100%;

min-width: 400px;

z-index: -10;

zoom: 1;

background-color: #fff;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

#text-typed {

height: auto;

white-space: inherit;

border: 1px solid;

border-radius: 0;

width: 250px;

}

#content {

width: 300px;

height: 90px;

border: 1px solid red;

top: 50%;

left: 50%;

margin-top: 20px;

margin-left: -30px;

{#top: 70%;#}{#left: 70%;#}{#transform: translate(-36%, -50%);#}

}

输入下单时的手机号查询

$("#head-title").typed({

strings: ["DADAGO^1000", "新型社交电商开拓者^1000", "致力于时尚潮流搭配的推广^1000"],

typeSpeed: 100,

loop: true,

startDelay: 60

});

你期待的结果是什么？实际看到的错误信息又是什么？