今天是猴年的第一天班，也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局：1.左侧固定宽度，高度自适应右侧；2.左侧宽度高度固定，右侧自适应宽高；3.左侧、右侧固定宽，中间自适应。 1.左侧固定宽度，高度自适应右侧 效果图 pic1.png pic2.png html+css左侧固定宽，自适应右侧高度 .main{ position: relative; col...
很简短的代码：``` var ifm= document.getElementById("iframe_userCenter"); ifm.height=document.documentElement.clientHeight; ifm.width=document.documentElement.clientWidth;```
1、 允许或禁止调整页面大小 iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例: 如果不允许调整页面大小，那么把user-scalable=yes改为user-scalable=no，如： 2、将网页修...
1、在HTML头部增加viewport标签。 在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下： 代码如下: 这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。 2、在 CSS 文件尾部增加针对不同屏幕分辨率的规则。 例如使用如下的代码，可以让屏幕宽度低于480像素的设备...
我在做前端页面，div块我固定了大小，但是我放进去的图片比这个div定义的大，我该如何写代码让图片自适应这个div大小？ 回复讨论(解决方案) img固定大小 或者图片设成背景 写js控制img的大小，适当绽放比例 max-height:100%; max-width:100% width:100%;height:auto; width:auto;height:100%; 可以利用背景图片插入，并设置属性background-size：value； 这个v...
Login body{ text-align: left; background-color: F6F6F6; background-attachment: fixed; } #imgcenter{ position:relative; height: auto; width:50%; left:20%; top:250px; } #center{ position:relative; height: auto; width:50%; left:20%; top:220px; } #account{ position:relative; height: auto; left:60%; top:-110px; padding:2%; ...
为什么要写这个 以前写过关于webapp自适应屏幕的文章（链接），不过写的大多数群众看不懂，所以来个图文并茂的版本。虽然只是一个简单的页面，不过在做的过程中也遇到了一些问题，也算是好事吧！ 该示例github地址：https://github.com/iwangx/WebApp访问地址：https://csssprite.herokuapp.com/ 准备 PSD：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我...
如上图所示，红色部分DIV宽度是100%，蓝色的是子元素，子元素有border-bottom，且文字右边有一个双箭头。 现要求如下： 1、纯CSS实现，不使用JS和table。 2、文字因为是用户输入的，所以每一行的文字宽度都不是固定的，但是文字只考虑一行的情况，不考虑两行，可以用white-space:nowrap;禁止换行。 3、每个子元素右边的双箭头必须是对齐的，右边双箭头与最长那行文字的距离是10px固定的，其它行双箭头与该行双箭头对齐。...
div {background: url(../images/pic.jpg);filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";-moz-background-size:100% 100%;background-size:100% 100%;}
Markdown是一个很好的标记语言，越来越流行作为编辑器的语法，Bootstrap是一个前端框架，那么问题来了，Markdown的图片标记如：，在页面上通常会转换成html，这个时候如何给图片加Bootstrap的图片自适应属性.img-responsive? 如： 用js就好了： <scripttype="text/javascript"> $(".content img").addClass(img-responsive);</ script> 别忘了在html的head标签内加上： <metan...
标题严格遵守了新广告法，你再不爽，我也没犯法呀！屁话不多说，直入！ 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了...
因为某种原因，我们总是需要展示一些复杂的文本，Html.fromHtml()已经不能满足我们的需求，比如后台可编辑的文本在前端显示起来比较吃力，所以为了解决一些复杂的文本显示就需要用到WebView。 WebView in ScrollView 我们都知道ScrollView和WebView都有滚动的效果，所以我们需要先屏蔽WebView的滚动事件。 Stack overflow讨论 中文乱码 如果出现中文乱码，你可以这样设置 webView.loadData(body, "text/html; chars...
我用bootstrap做自适应布局 可是当网页宽度太小了 整个网站就变形了 请问如何实现当网页宽度小于指定宽度时候 取消bootstrap的自适应布局 并且显示底部滚动条 防止网页变形 如何设置 能否给我个demo 回复讨论(解决方案) 2种办法实现，一个是css3属性media query，另外一个是js添加事件监听 .min-800{ width:800px;} 2种办法实现，一个是css3属性media que...
JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 iframe内容未知，高度可预测 这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用javascript改变高度。常用的兼容...
iframe高度自适应 iframe高度自适应是一个很老的话题。html5虽然已经将frame 框架给废弃，但是iframe这个标签还是存在的。假如有同学不了解frame和iframe的区别，可以看我之前的文章： html框架之iframe和frame及frameset的相关属性介绍。 虽然现在iframe在项目中已经很少出现了，但是有些项目迫不得已，还是会用到iframe。近期遇到一个案例，就用到了iframe。 基本案例如下：由于手机浏览器预览PDF不是很好，因此，将手...