前端自适应样式reset.css
@charset "utf-8"; /* CSS Document */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin:;
padding:;
} fieldset,
c {
border: none;
} img {
display: block;
} address,
caption,
cite,
code,
dfn,
th,
var {
font-style: normal;
font-weight: normal;
} ul,
ol,
li {
list-style: none;
} body {
color: #333;
font: 12px Arial,"Microsoft Yahei",sans-serif;
background: #fff;
} a {
color: #fff;
text-decoration: none;
} /*清除浮动*/
.clear {
clear: both
} * {
box-sizing: border-box
} .border-1px::after {
content: '';
position: absolute;
top:;
left:;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
pointer-events: none;
} body,
html,
#app {
height: 100%;
background: #f5f5f5;
} @media (min-width: 240px) {
html {
font-size: 32px;
}
} @media (min-width: 320px) {
html {
font-size: 42.66667px;
}
} @media (min-width: 360px) {
html {
font-size: 48px;
}
} @media (min-width: 375px) {
html {
font-size: 50px;
}
} @media (min-width: 384px) {
html {
font-size: 51.2px;
}
} @media (min-width: 411px) {
html {
font-size: 54.8px;
}
} @media (min-width: 414px) {
html {
font-size: 55.2px;
}
} @media (min-width: 424px) {
html {
font-size: 56.53333px;
}
} @media (min-width: 480px) {
html {
font-size: 64px;
}
} @media (min-width: 540px) {
html {
font-size: 72px;
}
} @media (min-width: 640px) {
html {
font-size: 85.33333px;
}
} @media (min-width: 720px) {
html {
font-size: 96px;
}
} @media (min-width: 750px) {
html {
font-size: 100px;
}
} @media (min-width: 768px) {
html {
font-size: 102.4px;
}
} @media (min-width: 800px) {
html {
font-size: 106.66667px;
}
} @media (min-width: 980px) {
html {
font-size: 130.66667px;
}
} @media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
} @media (min-width: 1080px) {
html {
font-size: 144px;
}
} @media (min-width: 1152px) {
html {
font-size: 153.6px;
}
} @media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
} @media (min-width: 1440px) {
html {
font-size: 192px;
}
} @media (min-width: 2160px) {
html {
font-size: 288px;
}
}
前端自适应样式reset.css的更多相关文章
- 前端自适应样式(reset.css)
@charset "utf-8"; /* CSS Document */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4 ...
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...
- 页面重置样式reset.css
我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- reset.css(样式重置)
CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- 封装好通用的reset.css base.css 样式重置css文件
一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, ...
随机推荐
- 前端学习笔记-JavaScript
js引入方式: 1.嵌入js的方式:直接在页内的script标签内书写js功能代码. <script type="text/javascript">alert('hel ...
- 【5min+】为你的.NET应用进行一次全方位体检
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 【Vue】状态管理
页面应用需要Vuex管理全局/模块的状态,大型单页面组件如果靠事件(events)/属性(props)通讯传值会把各个组件耦合在一起.因 此需要Vuex统一管理,当然如是小型单页面应用,引用Vuex反 ...
- HTML+CSS教程(一)简介及其基本标签的使用方法
一.前端 HTML(结构):HyPer TEXT Markup LanguageCSS(样式): 样式就是对于结构的一种美化JavaScript(js: 行为/ 提供了用户和界面的交互方式)jQuer ...
- MVC-基础01
MVC体系结构将应用程序分成三个主要组件:模型(Model).视图(View).和控制器(Controller).在ASP.NET MVC应用程序中,数据操控的逻辑包含在Models文件夹下,数据的展 ...
- 2018版移动端ui规范
计规范是一种将移动端常用控件标准化.统一化的的文档 今天整理了一篇设计规范的文章概论,讲诉中会以ios做介绍,安卓由于开源,平台相对教多不做单一阐述,实际操作的时候,我们不管是做一代还是二次的迭代产品 ...
- java Int类型转为double 类型;string转double
int a=12; double b=(double)a; or double c=Double.valueOf((double)a); string a_s="12"; doub ...
- XSS语义分析的阶段性总结(二)
本文首发于“合天智汇”微信公众号,作者:Kale 前言 上次分享了javascript语义分析,并且简单介绍了新型xss扫描器的一些想法,如何在不进行大量fuzz的情况下又能准确的检测出xss漏洞,这 ...
- markdownPad常用功能示例
1.列表 无序列表 姓名 张三 李四 王五 有序列表 张三 李四 王五 2.超链接 百度 3.引用 锄禾日当午,汗滴禾下土.谁知盘中餐,粒粒皆辛苦. -- 李绅<古风二首> 4.简要修饰文 ...
- Python(10)
如果 a+b+c=1000,且 a^2+b^2=c^2(a,b,c 为自然数),如何求出所有a.b.c可能的组合? # 注意是三重循环 for a in range(0, 1001): for b i ...