为了实现如图所示的效果： 设置table的宽度为百分比的值，让其宽度随页面的宽度而改变。input占据整个td的宽度。 主要html代码如下： 主要的scss样式如下： .form{ width: 96%; margin: 0.3rem auto; font-size: 0.7rem; td{ height: 2.5rem; } input{ font-family: "Microsoft Yahei"; outline: none; color: #d8d8d8; } input[type=text],input[type=phone],input[type=email]{ border: 1px solid #e...
html,body{height:100%;} .container{ height:100%; display:-webkit-flex; -webkit-flex-direction:column;} #top{ -webkit-flex:1; background:#f00;} #bottom{-webkit-flex:1; background:#0f0;}
@media screen and (min-width:1080px){.box{ width: 1080px;}.content{width: 1040px;}.img{height:180px;}.img{font-size: 48px;line-height: 180px;}.title{font-size: 46px;line-height: 100px;}.detail{font-size: 20px;}}@media screen and (min-width: 900px) and (max-width: 1079px) {.box{ width: 900px; }.content{width: 860px;}.img{height:160px;}.img{font-size: 40px;line-height: 160px;}.title{font-size: 38px;...
花了一个礼拜完成了慕课网定制的七夕主题效果，其中有一个没实现好的功能，就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下： 人物是采用的是雪碧图，通过坐标绝对数据取值 问题很明显，在缩放的屏幕上人物还是按照原尺寸大小显示 后来临时留了一节预备的方案：CSS3的scale处理直接可以让元素缩放 通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放，目测还是不错。 但是这会带一系列的计算问题...
自适应网页设计近来很流行，如果你接触比较少请参见 responsive sites。当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了。这里是一个快速教程，通过学习你会自适应网页和media queries的基本原理（前提你有css基础）。 Step 1：Meta 标签 （查看演示： demo） 为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta标签来设定。以下viewport...
support iframe responsive and fullscreen iframe(支持iframe自适应,并全屏iframe) ################################################################### 1.use jquery iframe resizer(it will autoresize iframe when content change) and more fullscreen a iframe 2.user jquery fullscreen plugin here ,the problem is iframe resizer set the iframes scrolling="no",so i...
1.使用css clear清除浮动； 在父级div体内添加子级div 2.对父级样式加overflow:hidden。 (PS:为什么是hidden?反其道而行之?) PS 1.clear 属性规定元素的哪一侧不允许其他浮动元素。 可能值：left、right、both、none(默认值)、inherit 2.overflow 属性规定当内容溢出元素框时发生的事情。 可能值：auto、scroll、hidden、visible(默认值)、inherit 参考文献： 1.解决子级用...
我是通过一个PC端网页的富文本编辑器上传了一段文字 里面有图片 然后在手里自适应H5网页中展示 但是文字都已经自适应宽度了 可图片就是原来大小 怎么解决 我设置css也无效 元素自身的样式无法更改… 回复讨论(解决方案) 编辑时图片不要加上样式 样式用外部css定 编辑时图片不要加上样式 样式用外部css定 图片好像就是没有设置
今天是猴年的第一天班，也是新的起点。分享一个如何用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的分辨率我...