textarea如何实现高度自适应？ - 轩枫阁 – 前端开发 | web前端技术博客
/ textarea如何实现高度自适应？
阅读：8410
作者：ivan
分类：、、、、
今天需要些一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。下面分享2种实现textarea高度自适应的做法，一种是用div来模拟textarea来实现的，用CSS控制样式，不用JS；另一种是利用JS控制的（因为存在浏览器兼容问题，所以写起来比较麻烦）；
方法一：div模拟textarea文本域轻松实现高度自适应
demo演示地址：
因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。
而用DIV来模拟时，首先遇到的问题是：div怎么实现输入功能？
可能我们还是第一次见到这个属性contenteditable，如一个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了。如
&div contenteditable="true"&&/div&
contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。
1234567891011121314151617181920
.textarea{&&&&width: 400px; &&&&min-height: 20px; &&&&max-height: 300px;&&&&_height: 120px; &&&&margin-left: auto; &&&&margin-right: auto; &&&&padding: 3px; &&&&outline: 0; &&&&border: 1px solid #a0b3d6; &&&&font-size: 12px; &&&&line-height: 24px;&&&&padding: 2px;&&&&word-wrap: break-word;&&&&overflow-x: hidden;&&&&overflow-y: auto;&&&&&border-color: rgba(82, 168, 236, 0.8);&&&&box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);}
&div class="textarea" contenteditable="true"&&br /&&/div&
CSS代码中，因为IE6不支持min/max，所以做了hack，其他的也好理解。
方法二：文本框textarea根据输入内容自适应高度
demo演示地址:
这个写法是用原生JS写的，考虑了很多兼容性问题，完全和新浪微博的回复效果一样的功能。有兴趣的童鞋可以仔细分析下代码。
123456789101112131415
#textarea { &&&&display: block;&&&&margin:0 auto;&&&&overflow: hidden; &&&&width: 550px; &&&&font-size: 14px;&&&&height: 18px; &&&&line-height: 24px;&&&&padding:2px; }textarea {&&&&outline: 0 none;&&&&border-color: rgba(82, 168, 236, 0.8);&&&&box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);}
javascript代码
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
/** * 文本框根据输入内容自适应高度 * @param&&&&&&&&&&&&&&&&{HTMLElement}&&&&&&&&输入框元素 * @param&&&&&&&&&&&&&&&&{Number}&&&&&&&&&&&&&&&&设置光标与输入框保持的距离(默认0) * @param&&&&&&&&&&&&&&&&{Number}&&&&&&&&&&&&&&&&设置最大高度(可选) */var autoTextarea = function (elem, extra, maxHeight) {&&&&&&&&extra = extra || 0;&&&&&&&&var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,&&&&&&&&isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),&&&&&&&&&&&&&&&&addEvent = function (type, callback) {&&&&&&&&&&&&&&&&&&&&&&&&elem.addEventListener ?&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem.addEventListener(type, callback, false) :&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&elem.attachEvent('on' + type, callback);&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&getStyle = elem.currentStyle ? function (name) {&&&&&&&&&&&&&&&&&&&&&&&&var val = elem.currentStyle[name];&&&&&&&&&&&&&&&&&&&&&&&&&if (name === 'height' && val.search(/px/i) !== 1) {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var rect = elem.getBoundingClientRect();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&return rect.bottom - rect.top -&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&parseFloat(getStyle('paddingTop')) -&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&parseFloat(getStyle('paddingBottom')) + 'px';&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&};&&&&&&&&&&&&&&&&&&&&&&&&&return val;&&&&&&&&&&&&&&&&} : function (name) {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&return getComputedStyle(elem, null)[name];&&&&&&&&&&&&&&&&},&&&&&&&&&&&&&&&&minHeight = parseFloat(getStyle('height'));&&&&&&&&&elem.style.resize = 'none';&&&&&&&&&var change = function () {&&&&&&&&&&&&&&&&var scrollTop, height,&&&&&&&&&&&&&&&&&&&&&&&&padding = 0,&&&&&&&&&&&&&&&&&&&&&&&&style = elem.style;&&&&&&&&&&&&&&&&&if (elem._length === elem.value.length) return;&&&&&&&&&&&&&&&&elem._length = elem.value.length;&&&&&&&&&&&&&&&&&if (!isFirefox && !isOpera) {&&&&&&&&&&&&&&&&&&&&&&&&padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));&&&&&&&&&&&&&&&&};&&&&&&&&&&&&&&&&scrollTop = document.body.scrollTop || document.documentElement.scrollTop;&&&&&&&&&&&&&&&&&elem.style.height = minHeight + 'px';&&&&&&&&&&&&&&&&if (elem.scrollHeight & minHeight) {&&&&&&&&&&&&&&&&&&&&&&&&if (maxHeight && elem.scrollHeight & maxHeight) {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&height = maxHeight - padding;&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&style.overflowY = 'auto';&&&&&&&&&&&&&&&&&&&&&&&&} else {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&height = elem.scrollHeight - padding;&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&style.overflowY = 'hidden';&&&&&&&&&&&&&&&&&&&&&&&&};&&&&&&&&&&&&&&&&&&&&&&&&style.height = height + extra + 'px';&&&&&&&&&&&&&&&&&&&&&&&&scrollTop += parseInt(style.height) - elem.currHeight;&&&&&&&&&&&&&&&&&&&&&&&&document.body.scrollTop = scrollTop;&&&&&&&&&&&&&&&&&&&&&&&&document.documentElement.scrollTop = scrollTop;&&&&&&&&&&&&&&&&&&&&&&&&elem.currHeight = parseInt(style.height);&&&&&&&&&&&&&&&&};&&&&&&&&};&&&&&&&&&addEvent('propertychange', change);&&&&&&&&addEvent('input', change);&&&&&&&&addEvent('focus', change);&&&&&&&&change();};
HTML代码（写在body里面的）
&textarea id="textarea" placeholder="回复内容"&&/textarea& &&&&&script& &&&&&&&&var text = document.getElementById("textarea");&&&&&&&&autoTextarea(text);// 调用&&&&&/script&
纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：移动端自适应方案 - 推酷
移动端自适应方案
弱弱插个我们团队的招聘：
前方依旧高能 ^_^ , 本文主要解决以下问题：
真的需要动态生成viewport吗？
如何自适应？
然后给出主观的最佳实践。
最帅的flex
赶时间戳这里传送门
比较无聊干燥的文章，看前请喝水。
手淘 ml.js
一个月前去了css开发者大会，听到了手淘的自适应方案，想起之前一直就想了解ml.js到底干了什么事。回来仔细研究了一下，抱着好奇心一并看了同样类型的网站的方案，深入学习一下。
获取手机dpr( window.devicePixelRatio )，动态生成viewport。
换取手机宽度，分成10份，每一份的宽度即是rem的尺寸。
根据设计稿尺寸( px )通过计算，转换成 rem 去布局。
ps :海外淘宝并没有这样做，而是scale1.0并且图片 大概 都是2倍图。
采用 scale=1.0 写死viewport。
flex布局，笃定认为布局尺寸是375 ( iPhone6 )
rem 确定非flex的元素
采用 scale=1.0 写死viewport
px + 百分比布局
提及实现之前，先简单过一些概念。
完美视口 的概念已经街知巷闻了，如果不知道可以先戳这里。
在这几篇文章里，还会学会 设备像素 , css像素 等概念，大神讲的很透彻，这里就不献丑了。
这里给出 完美视口
&meta name=&viewport& content=&initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0&/&
在移动端，低端无定制的需求，都可以用这个 完美视口 完成。然而看到这篇文章的你，显然完美视口还不能满足。
dpr是 devicePixelRatio 的简写，也就是 屏幕分辩比 。
历史原因，由于苹果retina的产生，使得清晰度提升，主要是因为`设备像素`提升了一倍，因此可以用更多像素去绘画更清晰的图像。#我乱说的#
坊间对于dpr更通俗的说法叫
scale是 屏幕拉伸比 。也就是视口上的 initial-scale , maximum-sacle 等属性。
scale 和 dpr的关系是倒数。
这是我对dpr的直观感受
同样去展示 1 x 1 像素的点，虽然在屏幕上看到的大小是一样，但背后表现它的像素数量是不同。
这也意味着，在一样大小的面积内，更多 物理像素 的屏幕上展现色彩的能力越强。
但这不是我要关注的点，我们关注的是。
1. 是否需要根据倍屏去切换scale达到伸缩的目的
2. 切换scale的成本和回报
下面根据几个实验来回答这两个问题。
自适应问题
实验1 － 传说中的1px
大多数给出要动态切换scale的理由有以下两个。
1. 1px并不是 [ 真实的1px ] ，
2. 为了充分利用屏幕的分辨率，使用符合屏幕的图片。
这一条和设计稿密切想关，要讨论它不能抛开设计稿不谈。
这里先补一下 切图课 ，如果自己要做1x , 2x, 3x 的设计稿。如何去实现？
尺寸！！！
大多数情况下，设计师产出各种尺寸的稿子（事实上一般只是2倍稿子），都是先画出大尺寸的稿子，再去缩小尺寸，最后导出。 这样会带来问题：
如果设计师在2倍稿子里画了一条 1px 的线，这时候假如我们要在scale=1.0里呈现的话，就会变成 0.5px ，如下图。
而很大一部分手机是无法画出0.5px的，因此这里一般有一个hack
transform:scaleX(0.5)或transform:scaleY(0.5)
但是有人提出了， 既然可以改变viewport的scale达到合理利用不同倍屏的优势，为什么不这么写呢。
&meta name=&viewport& content=&initial-scale=2.0,width=device-width/&
等等，为了设计稿的尺寸我们如此大费周章？
事实上，即使2x设计稿避免了1px。3x设计稿也可能出现2px。
而且这里如果写死scale可能造成部分地方和稿子出入较大，无法还原设计稿，界面的显示会打折扣。
解决这个问题的关键在于： 交流
如果你的设计师是个要求严格，而且产品界面把控非常严格的话，应该动态去实现viewport或使用scale的hack去改变。
如果部分区域实在没有必要 [ 过度优化 ] , scale=1.0 实在是非常低成本还原的方案，未尝不可。
对于这一点，争议较多，因为如果要做到对应倍图的话，意味着图片都需要做三份。成本太高了。
这里通常有两种做法
图片服务 例如在100x100的图片容器中。
http:// /abc.jpg_100x100
http:// /abc.jpg_200x200
http:// /abc.jpg_300x300
放弃1屏手机 ，全部启用2倍图，由于流量会消耗比较大（低端机），因此 滚动加载 等优化手段就会显得比较重要了。
实验1 - scale对倍图重要吗
这里看一下不同scale下图片的差异。
测试样本：160x160凯尔特人队标logo（一不小心暴露了绿色的血液）
测试容器：160x160 img标签
测试环境: intial-scale分别为 1.0 / 0.5 / 0.3333
图片尺寸: 1x (160x160) 2x (320x320) 3x (480x480)
测试结论： 不同scale 下使用 不同图片 差异非常大。
但是这里需要验证，是否 不同scale 对 同一图片 差异起到绝对作用。
肉眼观看 基本无区别 ，除了用取色器去获取，会发现有 色差 和部分像素被分割（下面会说到），之外，用不同scale显示同一图片基本没有什么区别。
实验2 - DownSampling
由于上一个实验最后的图片，使用同一scale下，不同倍数的图片，存在色差，这里验证一下。
测试方案 测试图片:
图片尺寸: 400x300 , 300x225 , 200x150 , 100x75
测试环境: scale = 1.0
测试容器: 100x75的 img元素
由于之前知道了DownSampling概念的存在，这里只是好奇心驱动试验一下。（对自适应其实没有卵用） DownSampling是说大图放入比图片尺寸小的容器中的时候，出现像素分割成就近色的情况。 测试结果:
注：6plus貌似和其他机型不同。
触发情况: 不同颜色像素接触的地方，会出现DownSampling。
对于rem要说的不多，看这张图。对于用到px的元素，使用rem统一去管理是很灵活的！(这里原谅我盗图了..)
无论是采用动态生成viewport或者写死scale，字体都需要适配大屏。之前提出的rem方案被证实在不同手机上显示不一致，这里还是回归成了px。
px最好用双数
两种方案(这里不考虑媒体查询，因为Android碎..,嗯，不说了...)
JS动态计算 （常见做法）
根据不同屏幕宽度计算不同字号大小。
1. 定基准值,设计稿是750宽度（2倍屏）,字体的大小是24px.
2. 计算指定宽度的字体大小。
var fontSize = width / 750 * 24 ;
根据dpr设定 （比较好的做法）
ps : 一般时初始化时设置为 根元素html 的attribute，
window.document.documentElement.setAttribute('dpr',window.devicePixelRatio)
然后css这样写
font-size=16
font-size=32
权衡之下，我觉得flex真的灵活方便太多，因此这里给出一个布局demo。大致如下图。(画的比较粗糙..)
(左稿右还原)
基本涵盖：
多列自适应
高度自定义
为什么 flex 能够做到 百分比 做不到的自适应。
比如我们也去学天猫，笃定认为宽度就是 375 (iPhone6尺寸)，那么两个元素flex分别为200和175。
无需计算百分比，在不同的界面上就会自动计算，而且以该浏览器可以识别的最小单位实现，比自己计算的百分比要精准。
写死 initial-scale＝1.0 对于实现 1px问题 , 问题比较大。 与设计师沟通协商 才是最好的解决问题的方法。
写死 initial-scale＝1.0 对于不同图片的显示， 采用不同倍图的话，会有一定压缩，但在可接受范围内。（当然，动态生成scale能够完美呈现...）
如果采用 动态生成viewport 方案，就用到rem来还原设计稿（还有rem－px的计算）。成本在 效率 上。
如果采用 写死initial-scale＝1.0 方案，就用flex布局，主要成本在 flex兼容性 上，但是实现非常灵活简单。
viewport的scale 的重要性远比我想象的要低很多，我原本以为这就是自适应。
但是后来发现，其实自适应还是回到了远古时代的 百分比％ ，只是现在有更聪明更灵活的方式 flex ，未来应该有两个方向去自适应。
一个是拥抱vw,vh。（手淘的ml.js十等分宽度， 1rem＝10vw ）
一个是更好的使用flex
现在使用后者已经有很多的库可以解决兼容性了，如参考资源最后的一个flex库。
调研的网站并不多，但是百分比仍然是很多人的首选。
适配到IE10+
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致css 怎样令图片能适应不同手机屏幕屏幕大小！要怎么处理？ · Ruby China
css怎样令图片能适应不同手机屏幕屏幕大小！要怎么处理？
是要根据不同尺寸加载不同图片，还是同一图片在不同屏幕尺寸下自动调整大小？
同一图片在不同屏幕尺寸下自动调整大小!
我用ionic开发，在实现一个商品详细页面的时候，就出现问题
那就是响应式设计的知识了。主要就是学一下媒体查询（media query）
这里有一些资源
不同手机都是fullwidth么？看你这个应该就width:100%就可以了吧
顺便赞一下你的图片！
没效果呢！我也尝试过！
好的，谢谢
从图上看 你图片外部的容器应该是正常的，你把容器position写成relative了没？
是不是不小心用了绝对定位之类的？绝对定位的元素的width属性计算是以 包含块为准的，其他绝大部分情况下则是以父元素为准。
我的代码，我目前没改到框架原来的CSS，我试试
&div class="list"&
&div class="item"&
&ion-slide-box&
&ion-slide ng-repeat="picture in product.pictures"&
&div class="slide-box"&
&img src="{{picture.image.url}}?500x500" style="width:100%;height:"&
&/ion-slide&
&/ion-slide-box&
设置了也不行！
那就不清楚了，这个有没有调试工具的？有可能问题不是出在img身上，而是其祖先元素。
调试就用浏览器来调试，这是这个框架的样式，我去掉div class="slide-box"这个div，图片就会不显示了！
* Slide Box
* --------------------------------------------------
visibility:
overflow: }
.slider-slides {
height: 100%; }
.slider-slide {
width: 100%;
height: 100%;
vertical-align: }
.slider-slide-image & img {
width: 100%; }
后方可回复, 如果你还没有账号请点击这里 。
共收到 15 条回复Android（11）
HTML5/CSS3手机自适应
就目前形势来看，Web App 正是眼下的一个趋势和潮流，但是，对于Web App的设计可能大家有的不是很了解，下面就将整理好的网页设计的技巧奉献给大家。
一. 允许网页宽度自动调整： &自适应网页设计&到底是怎么做到的？
其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。name=&viewport&content=&width=device-width,
initial-scale=1&
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 对于viewport属性，我是真正在接触移动web开发是才遇到的，一把的ps布局都是固定的960px，1000px这种。
下面三篇文章是对viewport属性详细的解释： Viewport（视区概念）——pc端的理解 Viewport（视区概念）——移动端的应用 viewport ——视区概念（转） 对于老式IE6，7，8浏览器需要js处理，由于主要平台是ios和安卓，所有可以暂时不考虑
二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
这一条非常重要。 具体说，CSS代码不能指定像素宽度： width: 只能指定百分比宽度： width: xx%; 或者：width: 这里开发是指一个网页不仅能用在ps上，也能同时用于移动端，但是对于webapp这种还是需要单独做一个webapp使用的页面。
对于这个知识点，对于我目前做的项目有用处，主要用于控制限定数据库里读出来的图片宽度。 详见：手机webapp的jquery mobile初次使用心得和解决图片自适应大小问题
三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。&
body { font: normal 100% Helvetica, Arial, sans- }&字体大小是页面默认大小的100%，即16像素h1 { font-size: 1.5 }&h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）small { font-size: 0.875 }&small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
四. 流动布局（fluid grid） &流动布局&的含义是，各个区块的位置都是浮动的，不是固定不变的
1.main { float: width: 70%; } .leftBar { float: width: 25%; }&
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。 另外，绝对定位（position: absolute）的使用，也要非常小心。
五. &自适应网页设计&的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
rel=&stylesheet&type=&text/css&media=&screen
and (max-device-width: 400px)&href=&tinyScreen.css&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
rel=&stylesheet&type=&text/css&media=&screen
and (min-width: 400px) and (max-device-width: 600px)&href=&smallScreen.css&
@import url(&tinyScreen.css&) screen and (max-device-width: 400px);
六. CSS的@media规则 同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) { .column { float: width: } #sidebar { display: } } &
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
七. 图片的自适应（fluid image） 除了布局和文本，&自适应网页设计&还必须实现图片的自动缩放。 这只要一行CSS代码：
img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，
所以只好写成： img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：&
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8323次
排名：千里之外
原创：21篇
转载：12篇
(2)(8)(1)(1)(4)(1)(11)(5)