前端自适应样式(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 PingFang SC,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,#root{
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, ...
随机推荐
- 安卓移动端line-height垂直居中出现偏移的解决方法
目前移动端在项目使用的rem,安卓手机上line-height属性,让它的值等于height,结果发现是不居中的. 出现此问题的原因是Android在排版计算的时候参考了primyfont字体的相关属 ...
- Unity-ECS(一)浅谈CPU缓存命中和Unity面向数据技术栈(DOTS)--笔记
一,缓存类型 概念:局部性. 时间局部性:当前用到的一个存储器位置,不久的将来会被用到. 空间局部性:当前用到的一个存储器位置,附近的位置会被用到. 那么在CPU的层面,这两个局部性的特性就会被Cac ...
- Java数据类型自动转换(++ ,+=)
在算术表达式中的自动类型转换 数据从类型范围小的自动向数据范围大的转换 整数向浮点数转换(包括long类型向float转换) 例子: char类型的范围内与整数之间转换依据ASCII表 强制转换会丢失 ...
- js 左右切换 局部刷新
//刷新地方的ID,后面ID前必须加空格 $("#gwc").load(location.href + " #gwc");
- 开会时CPU 飙升100%同事们都手忙脚乱记一次应急处理过程
告警 正在开会,突然钉钉告警声响个不停,同时市场人员反馈客户在投诉系统登不进了,报504错误.查看钉钉上的告警信息,几台业务服务器节点全部报CPU超过告警阈值,达100%. 赶紧从会上下来,SSH登录 ...
- Go Pentester - TCP Scanner
Simple Port Scanner with Golang Use Go‘s net package: net.Dial(network, address string) package main ...
- 题解 洛谷 P2287 [USACO07NOV]Sunscreen G
原题 传送门 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值(minSPFi and maxSPFi),太大就晒伤了,太小奶牛没 ...
- Python 为什么用 # 号作注释符?
关于编程语言中的注释,其重要性基本上已为大家所共识. 然而关于注释的规范,这个话题就像我们之前聊过的缩进.终止符和命名方式一样,众口难调. 注释符通常可分为两种,即行注释与块注释(inline/blo ...
- 离线安装 docker
1.基础环境 操作系统:CentOS 7.8 docker 版本:18.06.1 2.docker 下载 2.1 官方地址 https://download.docker.com/linux/stat ...
- Kafka入门(2):消费与位移
摘要 在这篇文章中,我将从消息在Kafka中的物理存储方式讲起,介绍分区-日志段-日志的各个层次. 然后我将接着上一篇文章的内容,把消费者的内容展开讲一讲,区分消费者与消费者组,以及这么设计有什么用. ...