使用CSS的resize属性实现左右拖拽改变布局大小

html-css015

使用CSS的resize属性实现左右拖拽改变布局大小,第1张

resize属性的具体用法可见MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

实现左右拖拽改变大小时:

HTML

此时的div会出现滚动边框,此时可拖拽的区域只有右下角的一小块。

此时需要将这个区域扩大可进行如下设置。

此时内部文字就被隐藏了,在实际使用时可以通过设置兄弟元素展示文字。

HTML:

CSS

效果链接: http://js.jirengu.com/voleracixe/2/edit

要想手动放大的话,可以借住手机浏览器本身,如果要用js去写的话就相当麻烦了。只要定义网页头部

header标签里加上:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/>

maximum-scale=2表示最大可以让页面放大2倍。