Html 不正确使用网页像素_Html_Css

Html 不正确使用网页像素

html css

Html 不正确使用网页像素,html,css,Html,Css,html，body，div，span，object，iframe， h1、h2、h3、h4、h5、h6、p、块报价、预，缩写、地址、引用、代码， del、dfn、em、img、ins、kbd、q、samp、，小、强、次、辅助、变量， b、我,， dl，dt，dd，ol，ul，li，字段集、表单、标签、图例、，表格、标题、正文、tfoot、THAD、tr、th、td、，文章、旁白、画布、细节、插图、人物、，页脚、页眉、H组、菜单、导航、节、摘要、，时间、标记、音频、视频{ 保证金：

html，body，div，span，object，iframe，
h1、h2、h3、h4、h5、h6、p、块报价、预，
缩写、地址、引用、代码，
del、dfn、em、img、ins、kbd、q、samp、，
小、强、次、辅助、变量，
b、 我,，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、插图、人物、，
页脚、页眉、H组、菜单、导航、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
背景：透明；
}
身体{
线高：1；
}
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
导航ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
a{
保证金：0；
填充：0；
字体大小：100%；
垂直对齐：基线；
背景：透明；
}
/*根据需要改变颜色*/
ins{
背景色：#ff9；
颜色：#000；
文字装饰：无；
}
/*根据需要改变颜色*/
标记{
背景色：#ff9；
颜色：#000；
字体：斜体；
字体大小：粗体；
}
德尔{
文字装饰：线条贯通；
}
缩写[标题]，dfn[标题]{
边框底部：1个点；
光标：帮助；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
/*更改边框颜色以满足您的需要*/
人力资源{
显示：块；
高度：1px；
边界：0；
边框顶部：1px实心#中交；
利润率：1米0；
填充：0；
}
输入，选择{
垂直对齐：中间对齐；
}
/*******重置完成超过此点******/
#标题{
背景色：#2098D1；
颜色：白色；
填充顶部：30px；
}
.组包装器{
宽度：60%；
保证金：0自动；
溢出：隐藏；
位置：相对位置；
}
.标志名称{
线高：1.4；
显示：内联块；
垂直对齐：中间对齐；
字体系列：arial；
位置：相对位置；
浮动：左；
}
.标志名称h1{
字体大小：20px；
文本转换：大写；
}
.标志名称h2{
字体大小：15px；
字体大小：正常；
}
#导航{
浮动：对；
}
#导航ul{
浮动：对；
宽度：100%；
字体系列：arial；
}
#李国荣{
显示：内联块；
右边距：10px；
字体大小：15px；
}
.介绍公司{
背景色：#2098D1；
颜色：白色；
填充顶部：30px；
高度：250px；
}
.集团中心{
宽度：60%；
保证金：0自动；
位置：相对位置；
文本对齐：居中；
边缘顶部：30px；
}
.集团中心h1{
字体大小：48px；
字体系列：arial；
}
.集团中心h2{
字体系列：arial；
字体大小：正常；
字体大小：23px；
边缘顶部：20px；
}
.集团中心h3{
字体系列：arial；
字体大小：粗体；
字体大小：13px；
边缘顶部：30px；
}
.内容包装器{
宽度：70%；
保证金：0自动；
}
.主要内容h1{
文本对齐：居中；
字体系列：Arial；
字体大小：50px；
}
.主要内容跨度{
字体大小：粗体；
颜色：#2098D1；
}
.内容包装器{
溢出：隐藏；
边缘顶部：50px；
}
.内容包装器img{
浮动：左；
}
.主要内容{
溢出：隐藏；
}
.内容包装器{
边缘顶部：20px；
宽度：75%；
左边缘：25%；
线高：1.3em；
字体系列：arial；
文本对齐：居中；
字体大小：20px；
}
1.我的技能{
背景色：#2098D1；
}
.技能包装{
宽度：70%；
保证金：0自动；
边缘顶端：40px；
颜色：白色；
}
.我的技能h1{
字体大小：50px；
边缘顶端：40px；
文本对齐：居中；
字体系列：arial；
}
.我的技能{
文本对齐：居中；
}
.我的技能{
文本对齐：居中；
列表样式类型：无；
显示：内联块；
}
/******媒体查询******/
/******屏幕：1115PX******/
@媒体屏幕和屏幕（最大宽度：1115px）{
#导航{
浮动：无；
}
#导航ul{
浮动：无；
}
#李国荣{
显示：内联块；
右边距：10px；
字体大小：10px；
}
.组包装器{
宽度：70%；
保证金：0自动；
文本对齐：居中；
位置：相对位置；
}
.集团中心h1{
字体大小：45px；
字体系列：arial；
}
.集团中心h2{
字体系列：arial；
字体大小：正常；
字号：22.5px；
边缘顶部：18px；
}
.集团中心h3{
字体系列：arial；
字体大小：粗体；
字号：13.5px；
利润上限：27px；
}
.标志名称{
显示：无；
}   
}
/******屏幕：1115PX******/
@媒体屏幕和屏幕（最大宽度：705px）{
.集团中心h1{
字体大小：40px；
字体系列：arial；
}
.集团中心h2{
字体系列：arial；
字体大小：正常；
字号：19.5px；
边缘顶部：18px；
}
.集团中心h3{
字体系列：arial；
字体大小：粗体；
字体大小：11px；
利润上限：27px；
}
.标志名称{
显示：无；
}
}
/******屏幕：1115PX******/
@媒体屏幕和屏幕（最大宽度：609px）{
.集团中心h1{
字体大小：35px；
字体系列：arial；
}
.集团中心h2{
字体系列：arial；
字体大小：正常；
字号：16.5px；
边缘顶部：18px；
}
.集团中心h3{
字体系列：arial；
字体大小：粗体；
字体大小：9px；
利润上限：27px；
}
.标志名称{
显示：无；
}
}
/******屏幕：1115PX******/
@媒体屏幕和屏幕（最大宽度：609px）{
.集团中心h1{
字体大小：30px；
字体系列：arial；
}
.集团中心h2{
字体系列：arial；
字体大小：正常；
字号：13.5px；
边缘顶部：18px；
}
.集团中心h3{
字体系列：arial；
字体大小：粗体；
字体大小：7px；
利润上限：27px；
}
.标志名称{
显示：无；
}  
}

我的网站
名字在这里
信息在此

关于
投资组合
推荐书
文章
雇用詹姆斯

WordPress/前端开发者
制作高质量的响应性网站和卓越的用户体验
查看投资组合

使用像素（px）的问题在于，无论屏幕大小如何，它都不会改变。百分比（%）考虑屏幕的宽度，并相应地调整元素的大小

例如：假设您有以下代码

<body>
  <div style="width: 50%;">
    <p>The width of this div will be 50% of the width of the body</p>
  </div>
</body>

同样的情况也适用于height属性。当您将屏幕/窗口调整为手机大小时，.intro company类的高度不会增加，因为您将其高度设置为250px。删除<代码

.group-wrapper {
margin:0 auto;
position:relative;
}

.group-center{
margin:0 auto;
position:relative;
text-align:center;
margin-top:30px;
}

.intro-company{
background-color:#2098D1;
color:white;
padding-top:30px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.child {
  width: calc(100% / 3);
  display: inline-block;
  font-size: 18px;
}