css meta自适应,自适应网页
viewport
宽度
{
width: xx%;
width:auto;
max-width: 90vw;
max-height: 90vh;
}
字体大小
html {
font-size: 62.5%; //10 ÷ 16 × 100% = 62.5%
}
body{
font-size: 1.6em;
font-szie:1.6rem; //css3
}
html { font-size:100.01%; }
body { font-size:1em; }
px em rem 转换工具
加载CSS
@media screen and ( max-width:400px ) {...} //当浏览器的可视区域小于400px
media="screen and (min-width: 400px) and (max-width: 600px)"
href="smallScreen.css" />
@import url("tinyScreen.css") screen and (max-width: 400px);
图片的自适应
img { max-width: 100%;}
img { width: 100%; } /*for IE8*/
js自动设置meta
测试
(function() {
// deicePixelRatio :设备像素
var scale = 1 / devicePixelRatio;
//设置meta 压缩界面 模拟设备的高分辨率
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
//debounce 为节流函数,自己实现。或者引入underscore即可。
var reSize = _.debounce(function() {
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
//按照640像素下字体为100px的标准来,得到一个字体缩放比例值 6.4
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);
window.onresize = reSize;
})();
html {
height: 100%;
width: 100%;
overflow: hidden;
font-size: 16px;
}
div {
height: 0.5rem;
widows: 0.5rem;
border: 0.01rem solid #19a39e;
}
flex布局
flex:0 1 auto|%|px //flex-grow flex-shrink flex-basis
圣杯布局
.wrapper {
display: flex;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.content {
display: flex;
flex: 1;
}
.main{
flex: 1;
}
.aside{
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.aside-1{
/* 导航放到最左边 */
order: -1;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
flex: 1;
}
.aside,
.wrapper{
flex: auto;
}
}
Header
Main
Aside 1
Aside 2
Footer
css meta自适应,自适应网页相关推荐
- TML5期末大作业:红色自适应网上鲜花网站设计——浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:红色自适应网上鲜花网站设计--浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载 常见网 ...
- HTML+CSS大作业——浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:红色自适应网上鲜花网站设计--浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品 植物网页设计作业模板 学生网页制作源代码下载 常见网 ...
- css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100 ...
- HTML5----响应式(自适应)网页设计
第一步:在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content="width=device-width, in ...
- html之响应式(自适应)网页设计
第一步:在网页代码的头部,加入一行 viewport 元标签 <meta name="viewport" content="width=device-width, ...
- HTML5----响应式(自适应)网页设计(自动适应屏幕大小)
HTML5----响应式(自适应)网页设计(自动适应屏幕大小) 现在,很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机,电脑等设备,那么就需要我们在页面上下功夫,但移动端的布局不同于pc ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- css svg视频自适应_使用SVG和CSS步骤进行自适应的动画步行周期
css svg视频自适应 In the previous article I talked about steps() in CSS animation, and provided a simple ...
- html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇 字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
- CSS解决高度自适应问题
CSS解决高度自适应问题 参考文章: (1)CSS解决高度自适应问题 (2)https://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html ...
最新文章
- windows server 驱动精灵_大神教你如何在Win10中检查磁盘驱动器错误
- Qt中QAbstractTableModel、QItemDelegate的联合使用
- 软件架构最佳实践和案例分析
- 命令执行——命令执行漏洞及(四)
- 查询数据库中所有表名称
- 2017年UI、Web、微服务顶级框架都有啥?不看就落伍了1
- C++11 继承构造函数与委托构造函数
- 撤销工作表保护原密码_批量解除工作表保护,和批量执行保护一样简单
- 为什么数学不好,和语文有关系?
- emule服务器有响应,eMule刚连上服务器就断请教为什么
- 居家办公不敢上厕所!5分钟抓拍一次,不够89次算旷工?尚德机构回应...
- 请教一下水卡校验算法
- Mac配置docker镜像源
- C语言3067答案,教师招聘《小学教育心理学》通关试题每日练(2020年03月03日-3067)...
- android的wifi网卡移植详细过程已经通用驱动的问题
- PHP操作doc文档之PHPWord0.6.1
- php 使用dataview,echarts如何优化数据视图dataView中的样式(代码示例)
- MATLAB学习笔记(五)——MATLAB绘图
- 【课后习题】 线性代数第六版第二章 矩阵及其运算 习题二
- iOS仿QQ分组效果