好用的独立响应式css
2024-03-10 21:16:30
好用的独立响应式css,网站制作的时候很方便,@media响应式也也好了。在配合独立的格栅系统 ,就好用了。不用加载其他css框架梁 https://www.002t.cn/jishuwenzhang/108.html
如果要用rem布局。在加载一个js响应式设置html字体大小。 https://www.002t.cn/jishuwenzhang/109.html
/*重置标签*/ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.15;-webkit-tap-highlight-color: rgba(0,0,0,0);font-size: 100px;} body{margin:0;font-family: "Microsoft Yahei",PingFangSC-Regular,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;line-height: 1.42857143;font-size: 16px;min-width: 1230px;background: #fff;color: #202a52;} h1{font-size:2em;margin:.67em 0;} h2,h3,h4{margin: 0;} figure{margin:1em 40px;} hr{box-sizing:content-box;height:0;overflow:visible;} a{-webkit-text-decoration-skip:objects;background-color:transparent;} abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;} b,strong{font-weight:bolder;} dfn{font-style:italic;} mark{background-color:#ff0;color:#000;} small{font-size:80%;} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sub{bottom:-.25em;} sup{top:-.5em;} audio:not([controls]){display:none;height:0;} img{border-style:none;max-width:100%;} svg:not(:root){overflow:hidden;} button,input,optgroup,select,textarea{line-height:1.42857143;margin:0;outline: none;} body, button, input, select, textarea {text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga","kern";} button,input{overflow:visible;} button,select{text-transform:none;} button,html [type=button],/* 1 */ [type=reset],[type=submit]{-webkit-appearance:button;} button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0;} button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText;} fieldset{padding:.35em .75em .625em;} legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;} progress{display:inline-block;vertical-align:baseline;} textarea{overflow:auto;} [type=checkbox],[type=radio]{box-sizing:border-box;padding:0;} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;} [type=search]{-webkit-appearance:textfield;outline-offset:-2px;} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;} summary{display:list-item;} article,aside,footer,header,nav,section,figcaption,figure,main,details,/* 1 */ menu{display:block;} pre,code,kbd,samp{font-family:monospace, monospace;font-size:1em;} audio,video,canvas{display:inline-block;} template,[hidden]{display:none;} .clearfix{zoom:1;} .clearfix:before,.clearfix:after{display:table;line-height:0;content:"";} .clearfix:after{clear:both;} a {color: #333;text-decoration: none;} a:hover {color: #202a52;} ul {margin: 0;list-style: none;padding: 0;} /*pc*/ .container {padding: 0 20px;width: 1140px;margin: 0 auto;} /*ipad pro */ @media(max-width: 1280px) and (min-width: 1024px){ html{font-size: 80px!important;} body{min-width: 100%;} .container{width: 100%;} } /*ipad mini air*/ @media(max-width: 1023px){ html{font-size: 100px;} body{min-width: 100%;} .container{width: 100%;} } /*手机*/ @media screen and (max-width: 767px) { body {min-width: 320px;padding-top: 50px;padding-bottom: 50px;} .container {width: auto;} }
【责任编辑:超级管理员】
关键字:
js按照宽高比例设定html字体 css排版的时候用rem单位设置字体 php简单Session购物车功能function函数最新文章
2021-05-10 09:29
- 简单实现 网站转微信小程序,并且让他支持 转发给朋友 功能
- 取消pbootcms 首页加入了?参数后 301重定向问题
- dede 电脑端和手机端首页同步生成方法,
- excel表格导入access中不换行解决办法-
- dede完美上下篇 英文版替换标签 dede:prenext 中英
- dede中英文网站栏目条调用方法
- dede双语站 面包导航{dede:field name='position'}
- PS: 无法完成请求,因为某种原因阻止文本引擎进行
- dede企业网站常见左侧固定大小类二级菜单调用代码
- 栏目页dede:channelartlist调用下级子类并dede:arcl
- dede:channelartlis 判断是否有子类栏目
- 更换织梦后台图集上传flash插件为layui上传模块
相关文章
2021-05-10 09:29