rem字体+百分比布局表格
效果图:
上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem字体+百分比布局表格</title>
<style>
table{width:100%;height:auto;font-size:.11rem}
table tr>td{width:25%;vertical-align:middle;text-align:center;background-color:#FFFFFF;height:.33rem;line-height:.33rem}
table tr:nth-of-type(odd) td:nth-of-type(even){background:#EEFFFF;color:#333}
table tr>td:nth-of-type(odd){background:#F0F0F0;color:#006600}
</style>
</head>
<body>
<table cellspacing="0" bordercolor="#F1E0A0" cellpadding="0" border="1">
<tr>
<td>区域方位</td>
<td>城南区域</td>
<td>小区地段</td>
<td>灵安</td>
</tr>
<tr>
<td>房屋类型</td>
<td>小高层</td>
<td>户型结构</td>
<td>3室2厅1卫</td>
</tr>
<tr>
<td>所在楼层</td>
<td>1 楼</td>
<td>装修程度</td>
<td>毛坯未装</td>
</tr>
<tr>
<td>楼层总数</td>
<td>12 层</td>
<td>建筑面积</td>
<td>95.40㎡ </td>
</tr>
<tr>
<td>车库车位</td>
<td>自行车库</td>
<td>契证年数</td>
<td>未满两年 </td>
</tr>
<tr>
<td>小学学区</td>
<td></td>
<td>中学学区</td>
<td>桐乡七中</td>
</tr>
<tr>
<td>房屋朝向</td>
<td>朝南</td>
<td>土地性质</td>
<td>商业用地 </td>
</tr>
<tr>
<td>建成年份</td>
<td>2017</td>
<td>每平单价</td>
<td>8909元 </td>
</tr>
<tr>
<td>证件情况</td>
<td>证件齐全</td>
<td>交易价格</td>
<td style="color:red;">85.00万</td>
</tr>
<tr>
<td>配套设施</td>
<td colspan="3"></td>
</tr>
</table>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth)
return;
if (clientWidth < 750) {
docEl.style.fontSize = 120 * (clientWidth / 750) + "px";
console.log(120 * (clientWidth / 750) + "px")
} else {
docEl.style.fontSize = "120px"
}
};
if (!doc.addEventListener)
return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
$(document).ready(function () {});
</script>
</body>
利用rem字体!不要使用flex布局,否则 colspan = ”3“ 不起任何作用,我这里使用的是百分比布局;
rem字体+百分比布局表格的更多相关文章
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Android 增强版百分比布局库 为了适配而扩展
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- Android百分比布局支持库介绍——com.android.support:percent(转)
转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
随机推荐
- curry柯里化
Function.prototype.method = function(name,func){ if(!this.prototype[name]){ this.prototype[name] = f ...
- 51nod 1205 流水线调度
1205 流水线调度 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 N个作业{1,2,…,n}要在由2台机器M1和M2组成的流水线上完成加工.每个 ...
- GoldenGate—日常管理
Classic Replicat Mode (一)源端和目标端新增加复制表 根据需求将生产库中PROCESS_LOG表通过ogg同步到测试库中:操作步骤: 当GoldenGate仅打开DML复制时,源 ...
- day27—JavaScript实现定时器及其应用案例
转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...
- Hugo - 安装、设置及使用
Hugo 官方主页:https://gohugo.io 待选主题: https://github.com/cdipaolo/gindoro https://github.com/oserz/hugo- ...
- php正则提取html img src地址
<?php$str='<img border="0" src="1.jpg" alt=""/><img border ...
- vlan vtp配置
vlan vtp配置 VTP:Vlan Trunking Protocol 用于管理VLAN(统一创建.修改.删除).用来同步vlan. VTP的原理 VTP模式(服务器,客户端和透明模式) ...
- 2019/11/09 TZOJ
1001 Interesting Integers http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail& ...
- 校内模拟赛T5:连续的“包含”子串长度( nekameleoni?) —— 线段树单点修改,区间查询 + 尺取法合并
nekameleoni 区间查询和修改 给定N,K,M(N个整数序列,范围1~K,M次查询或修改) 如果是修改,则输入三个数,第一个数为1代表修改,第二个数为将N个数中第i个数做修改,第三个数为修改成 ...
- (转)Linux下编译安装log4cxx
Linux下编译安装log4cxx 一个项目的服务器端在Linux平台下,用到了开源日志库log4cxx,这个库是apache项目的一个子库.功能很不错.下面记录下它的编译和安装过程. log4cxx ...