css重置

最新推荐文章于 2023-05-21 21:28:15 发布

梧桐落叶~

最新推荐文章于 2023-05-21 21:28:15 发布

阅读量118

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/weixin_44023519/article/details/102887255

版权

大前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

静止用户缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

css重置PC端

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
ul,ol,li{list-style:none;}
b,strong{font-weight:normal;}
em,i{font-style:normal;}
a,u{text-decoration: none;}
img{border:0;display:block;}
input{outline:none;}

css重置用于移动端

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
ul,ol,li{list-style:none;}
b,strong{font-weight:normal;}
em,i{font-style:normal;}
a,u{text-decoration: none;}
img{border:0;display:block;}
input{outline:none;}
*{
    box-sizing:border-box;
}
html,body{
    height: 100%;
}

body{
    display: flex;
    flex-direction:column;
}

媒体查询

 @media all and (max-width:320px){
    html{font-size:12px;}
}
@media all and (min-width:321px) and (max-width:375px){
    html{font-size:14px;}
}
@media all and (min-width:376px){
    html{font-size:16px;}
}

vw结合rem写移动端

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,figcaption{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:normal;}
ul,ol,li{list-style:none;}
b,strong{font-weight:normal;}
em,i{font-style:normal;}
a,u{text-decoration: none;}
img{border:0;display:block;}
input{outline:none;}
*{
    box-sizing:border-box;
}
html,body{
    height: 100%;
}
html{
	font-size: 31.25vw;
}
body{
    display: flex;
    flex-direction:column;
}