div+css 如何实现页面随浏览器窗口伸缩而变化

浏览器的页面缩小,页面的内容也接着缩小。
使得用户在不放大窗口的情况下浏览全局。
具体的能说下关键代码或思路吗

5个回答

楼主说的应该是响应式吧。
做响应式站点,建议用bootstrap框架,用 .col-md-num 属性 很轻易就可以实现响应式的了

如果说硬是要自己原生开发的话,那么得把全局元素设置为居中对齐(不包括盒子里具体的图片文案)然后用百分比来实现缩放,还有一个需要注意的是响应式的盒子应该都会给他们加浮动的,要特别注意盒模型间浮动的影响

使用响应式布局,具体如何可以直接百度

原生开发响应式的工程量有点大,而且bug可能会有点多,时不时就踩个坑 拿来练练手还可以 不建议实际项目中原生开发

额。。。这个用弹性盒子自不行吗?

建议使用bootstrap + angulajs 实现

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
实现控件随窗体变化而变化
实现控件随窗体变化而变化,test实现了一张图片随着窗体的变化而变化的的过程
请问如何让自定义控件大小随页面变化而变化?
如题...
如何使背景边框随页面长度的变化而变化?
如何使背景边框随页面长度的变化而变化?初学,别介意!
随参数的变化而变化.......
我想根据一个页面传来的参数的不同来显示不同的内容rn现在我传递了一个参数rn并且也能接收到,我已经把它用到sql中了,rn而用来接收参数的这个文件里面有个DataGrid控件rn在这个DataGrid控件里怎么显示相应的内容呢?rn下面是index.aspx.cs文件的源码(index.asp这个文件是用来接收这个参数的并根据参数的不同来显示不同的内容)rn该怎么改呢?谢谢!愿我的揭帖带给你技术的认证!rnrnusing System;rnusing System.Collections;rnusing System.ComponentModel;rnusing System.Data;rnusing System.Drawing;rnusing System.Web;rnusing System.Web.SessionState;rnusing System.Web.UI;rnusing System.Web.UI.WebControls;rnusing System.Web.UI.HtmlControls;rnusing System.Data.SqlClient;rnnamespace indexrnrn /// rn /// producttext 的摘要说明。rn /// rn public class producttext : System.Web.UI.Pagern rn protected System.Data.OleDb.OleDbDataAdapter oleDbDataAdapter1;rn protected System.Data.OleDb.OleDbCommand oleDbSelectCommand1;rn protected System.Data.OleDb.OleDbCommand oleDbInsertCommand1;rn protected System.Data.OleDb.OleDbConnection oleDbConnection1;rn protected System.Web.UI.WebControls.DataGrid DataGrid1;rn protected index.news news1;rn rn rn #region Web Form Designer generated codern override protected void OnInit(EventArgs e)rn rn //rn // CODEGEN:该调用是 ASP.NET Web 窗体设计器所必需的。rn //rn InitializeComponent();rn base.OnInit(e);rn rn rn /// rn /// 设计器支持所需的方法 - 不要使用代码编辑器修改rn /// 此方法的内容。rn /// rn private void InitializeComponent()rn rn this.oleDbDataAdapter1 = new System.Data.OleDb.OleDbDataAdapter();rn this.oleDbInsertCommand1 = new System.Data.OleDb.OleDbCommand();rn this.oleDbConnection1 = new System.Data.OleDb.OleDbConnection();rn this.oleDbSelectCommand1 = new System.Data.OleDb.OleDbCommand();rn this.news1 = new index.news();rn ((System.ComponentModel.ISupportInitialize)(this.news1)).BeginInit();rn this.DataGrid1.SelectedIndexChanged += new System.EventHandler(this.DataGrid1_SelectedIndexChanged);rn // rn // oleDbDataAdapter1rn // rn this.oleDbDataAdapter1.InsertCommand = this.oleDbInsertCommand1;rn this.oleDbDataAdapter1.SelectCommand = this.oleDbSelectCommand1;rn this.oleDbDataAdapter1.TableMappings.AddRange(new System.Data.Common.DataTableMapping[] rn new System.Data.Common.DataTableMapping("Table", "productnews", new System.Data.Common.DataColumnMapping[] rn new System.Data.Common.DataColumnMapping("productid", "productid"),rn new System.Data.Common.DataColumnMapping("producttitle", "producttitle"),rn new System.Data.Common.DataColumnMapping("producttext", "producttext"),rn new System.Data.Common.DataColumnMapping("productdate", "productdate"),rn new System.Data.Common.DataColumnMapping("producttype", "producttype")));rn // rn // oleDbInsertCommand1rn // rn this.oleDbInsertCommand1.CommandText = "INSERT INTO productnews(productid, producttitle, producttext, productdate, produc" +rn "ttype) VALUES (?, ?, ?, ?, ?); SELECT productid, producttitle, producttext, prod" +rn "uctdate, producttype FROM productnews";rn this.oleDbInsertCommand1.Connection = this.oleDbConnection1;rn this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("productid", System.Data.OleDb.OleDbType.Integer, 4, "productid"));rn this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("producttitle", System.Data.OleDb.OleDbType.VarWChar, 1073741823, "producttitle"));rn this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("producttext", System.Data.OleDb.OleDbType.VarWChar, 1073741823, "producttext"));rn this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("productdate", System.Data.OleDb.OleDbType.DBTimeStamp, 4, "productdate"));rn this.oleDbInsertCommand1.Parameters.Add(new System.Data.OleDb.OleDbParameter("producttype", System.Data.OleDb.OleDbType.VarWChar, 50, "producttype"));rn // rn // oleDbConnection1rn // rn this.oleDbConnection1.ConnectionString = @"Provider=SQLOLEDB.1;Password=123;Persist Security Info=True;User ID=sa;Initial Catalog=employee;Data Source=soft;Use Procedure for Prepare=1;Auto Translate=True;Packet Size=4096;Workstation ID=SOFT;Use Encryption for Data=False;Tag with column collation when possible=False";rn // rn // oleDbSelectCommand1rn // rn this.oleDbSelectCommand1.CommandText = "SELECT productid, producttitle, producttext, productdate, producttype FROM produc" +rn "tnews";rn this.oleDbSelectCommand1.Connection = this.oleDbConnection1;rn // rn // news1rn // rn this.news1.DataSetName = "news";rn this.news1.Locale = new System.Globalization.CultureInfo("zh-CN");rn this.news1.Namespace = "http://www.tempuri.org/news.xsd";rn this.Load += new System.EventHandler(this.Page_Load);rn ((System.ComponentModel.ISupportInitialize)(this.news1)).EndInit();rnrn rn #endregionrnrn private void Page_Load(object sender, System.EventArgs e)rn rn rn // string xx=DateTime.Now.ToString("hh:mm:ss");rn // this.Response.Write(xx);rn // this.Response.End();rn string aa=this.Request.QueryString["id"];rn this.Session["aa"]=aa;rn //this.Response.Write(Session["aa"]);rn //this.Response.End();rnrn SqlConnection Conn=new SqlConnection("server=soft;database=employee;user id=sa;password=123;");rnrn SqlCommand rs=new SqlCommand("select * from productnews where productid="+Session["aa"]+"",Conn); rnrn Conn.Open();rn SqlDataReader dr=rs.ExecuteReader();rn rn if ( !IsPostBack)rn rn oleDbDataAdapter1.Fill(news1);rn DataGrid1.DataBind();rn rn rnrn rnrn private void DataGrid1_SelectedIndexChanged(object sender, System.EventArgs e)rn rnrn rn rnrnrnrnrn
.net页面内容随页面宽度变化而变化
我把表格设置了宽度100%,设置为相对定位,里面的控件设置为绝对定位,当我浏览时,最大化显示正常,当我缩小页面时,里面的控件和内容没有随页面宽度改变,而是把页面内容盖住了,请问如何页面内容随页面宽度变化而变化
随着浏览器窗口变化而变化的函数
在工作中遇到了定义一个容器,但是这个容器是拿百分比控制的,随着浏览器的窗口的变化,里面的元素的变化会跟这个容器的宽高有着密切的关系,那么动态获取这个容器的宽和高就是关键所在了,那么今天就介绍一下如何随着浏览器窗口的改变而做一些事情,下面写一个简单的demo1.如果用jQuery的话var num = 0; $(window).resize(function() { console.log(
jsp页面显示效果随浏览器窗口的大小而变化,怎么办?
浏览器全屏时显示正常,当刚弹出页面时,窗口通常不是全屏的,可此时jsp页面上table中的文字就自动变行,看着很乱。怎么才能够让刚弹出的窗口显示的和全屏时一个效果呢?
如何实现Image控件随的图片的大小的变化而变化
我在Form 中, 拉了一个300*300的Image控件,rn想实现的是,当载入不同大小的图片时, Image控件的大小也就是300*300不变rn但是想多出两个滚动条,一个横,一个竖,当推动横的或竖的滚动条时,能动态的相应移动到载入图片的位置。rnrn不知道该怎么实现。 如果Image控件不能实现的话,用其它控件也行,多个组合控件也行。rnrn效果就是ACDSEE软件一样,当图片很大时,能产生两个滚动条。拉拉显示。rnrn非常感谢那些能阅读我问题的人。rn小弟愚钝, 最后有代码显示,可以看看。
如何实现字体随窗口大小变化而自动变化?
请问在MFC中如何使字体大小随窗口变化而自动变化,比如说始终使字的高度始终占窗口的1/3?谢谢!
如何实现下拉框的值随选择的变化而变化???
我这里的下拉框是跟数据库的某列绑定在一起,但是单我选择下拉框的某列时,提交之后选项还是原来的那个值,请问怎么办?(我要它显示我选择的那个值)rn<%@ Import Namespace="System"%>rn<%@ Import Namespace="System.Data"%>rn<%@ Import Namespace="System.Data.SqlClient"%>rnrnrn rn 试卷编辑rnrnrn rn rn rn 考试科目:rn rn 试题类型:rn rn rn rn rn rnrnrn rnrn
如何实现JTextArea的大小自动随窗口大小的变化而变化
[code=Java]rn Container contentPane = getContentPane();rn JPanel textPanel = new JPanel();rn //创建并添加一个带滚动条的文本区,文本可以自动换行rn JTextArea scrollArea = new JTextArea("", HEIGHT / 20, WIDTH / 12);rn scrollArea.setLineWrap(true);rn JScrollPane scrollPane = new JScrollPane(scrollArea);rn textPanel.add(scrollPane);rn contentPane.add(textPanel);rn[/code]rnrn这段代码要怎么改才能实现scrollArea的大小自动随窗口的大小变化而变化呢?JAVA新人,才学GUI…各种不懂,求助啊……
如何实现控件随窗体大小变化而变化?
如何实现控件随窗体大小变化而变化?
如何实现窗口中控件随窗口的变化而变化?
当窗口的大小变化时,窗口中的控件会自动跟着变化,请各位高手帮忙,最好能提供程序。
QSlider的groove图片,怎么随窗口大小变化而伸缩
QSlider的groove图片,怎么随窗口大小变化而伸缩?rn窗口小的时候,可以铺满窗口,等到窗口全屏的时候,貌似图片没有那么大,所以显示有问题。
iframe 随子页面大小变化而变化
子页面大小小于屏幕大小时,按一屏显示;多于一屏时,出现滚动条。子页面大小发生变化时,iframe自适应。window.setInterval(function(){ var bodyheight = $("#iframe").contents().find("body").height(); var winheight=$(window).height(); if(bodyh
怎样实现随声音而变化的波形?
这种波形是文件中包含的信息,还是根据声音得出来的,谢谢。
控件随窗体变化而变化(VB)
免费下载,vb源码,供初学者参考,喜欢就下吧。
关于窗体随字数的变化而变化
窗体上有个QLabel,设置了自适应的属性和换行。但第一次在QLabel上显示了若干字数后,窗体和QLabel都变大了,但又当字数少的时候,窗体和QLabel还是上次的大小,只会随字数的增多而变大,不会随着字数的减少而变小。请问该如何解决?
lable-textbox 随窗体变化而变化
页面布局大体如下所示:rnrnLabel1 TextBox1 Label2 TextBox2rnrn要怎么设置Label或者TextBox的属性,让TextBox的大小随着窗体的变化而变化,同时Label标题始终不会被遮盖,并随着TextBox的变化而变化呢rn貌似是很简单就能把它设置好,但是我试了好多次都弄不好。rn要在Resize事件里写代码不成。rn求各路大神帮忙分析下,万分感谢。
DataGrid 随comboBox而变化
在winform中,有一个comboBox和一个DataGrid。rnDataGrid 的内容随着comboBox 的内容进行变化,rn当comboBox 的内容发生变化时,绑定DataGrid的数据应该发生了改变,但是显示时原有的内容没有去掉,新的数据添加到原数据的后面,为什么?rnrn能否clear()原数据,如何clear.rnrnthanks!rn
Vb.net空间随窗体变化而变化
在编写VB.net应用程序是使控件随窗体的变化而变化的代码
C#控件随窗体变化而变化
------C#根据窗体大小调整控件大小,控件随窗体变化而变化的原代码程序设计。-------------
控件大小随窗口变化而变化
我的窗口里又个dbgrid,在窗口改变大小后,比如说点窗口的最大化按纽,然后dbgrid的空间也要调整大小,请问在窗口什么事件中怎么写才能实现这样的功能!
控件随窗体变化而变化!
求当mdichild为真时控件随窗体变化而变化的代码...
datagridview随窗体变化而变化的方式
第一:在项目测试中 datagridview.DataSource =DataTable;方式填充数据 窗体大小基本都是900×800的大小 rn通过下面任意一种方式设置datagridview:在加载datagridview的时候 数据一条一条的下来(加载),用下拉滚动条 如果拉快点,那跟刷屏差不多 郁闷! rn 测试的时候就300条数据 后来删除只有2条数据也是一样的,后来随便拖了一个界面加一个datagridview测试 其他的都不设置 一下子就加载了 没有出现问题,只是下拉的时候 如果快点 还跟刷屏一样,我想问下 各位有没有遇到这样的问题 遇到是怎么解决的? 在线急等............................................rnthis.dataGridView1.Dock = System.Windows.Forms.DockStyle.Fill;rnrn或者rnrnthis.dataGridView1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)rn | System.Windows.Forms.AnchorStyles.Left)rn | System.Windows.Forms.AnchorStyles.Right)));rnrn还有一点注意:都说winfrom程序加载页面耗内存,在测试过程中也看啦任务管理器 在项目中 填充数据的对象基本都clear啦。 再说下我测试的电脑配置: 分辨率1280*800 集成显卡 酷睿 1.6HZ 2G内存(DDR2) (台式) 1024*768独立 2.0HZ 2G内存(DDR2)(笔记本) 都出现上面的问题!!
如何将 textarea 随窗口大小变化而变化?
1.如何将TEXTAREA随窗口大小变化而变化?rnrn2.如何TEXTAREA中显示网页(所见即所得的)rnrnrn(就像YAHOO写信的文本框,不看不懂它的代码到底哪个是我要的,太多了)rnrn
电脑屏幕亮度随背景颜色变化而变化
问题所在(我的电脑win10 - 教育版)此次主要针对笔记本电脑 我出现这个问题的英文电脑屏幕看到黑色或灰色的图片时,电脑的亮度会逐渐降低,等背景色变白电脑亮度也会逐渐变亮 解答陈列 1:win10系统服务监控问题;链接:https://zhidao.baidu.com/question/499372655.html 1)...
响应式之随窗口变化而变化
当窗口大小调整的时候,执行的事件        $(window).resize(function(event) {            //将窗口宽度重新获取,然后给每一个li            w = $(window).width();            $('.box ul li').width( w );            //将改变之后w重新做动画;           ...
asp.net div随分辨率变化而变化
rn rn rn rn rn rn 系rn rn rn rn rnrnrnrn我的分辨率是1024*768显示没有问题,但在别人宽屏上时,右边出现很大白空隙,怎么让div随分辨率变化而变化。谢谢
TEdit 随窗体的变化而变化?
请问Delphi的TEdit控件有没有属性可以设置,让其随窗体的变化而变化。rn请大家多多指教。
GridPanel随窗口大小变化而变化
使用viewport布局,左侧(west)是一棵树,右侧(center)是用户数据区, 在左侧树收缩时,右侧的gridpel跟随窗口变化而变化。 代码如下: var tree_type_grid = new Ext.grid.GridPanel({ id : 'tree_type_grid', store : treeTypeStore, layout:...
vc控件随对话框变化而变化
vc的普通控件随着对话框的尺寸改变,会随之改变控件的大小和位置。
c#控件随屏幕分辨率的变化而变化
1.c#控件随屏幕分辨率的变化而变化 int w = Screen.PrimaryScreen.Bounds.Width;  int h = Screen.PrimaryScreen.Bounds.Height;  this.Size = new System.Drawing.Size(w, h);
TREEVIEW-CHECKBOX父节点随子节点的变化而变化
TREEVIEW-CHECKBOX父节点随子节点的变化而变化rnrnrn1rnPrivate Sub CheckChild(ByVal Node As MSComctlLib.Node, ByVal bCheck As Boolean, Optional ByVal bNext As Boolean = True, Optional ByVal bChild As Boolean = True)rn If Not Node Is Nothing Thenrn Node.Checked = bCheckrn If Node.Children And bChild Thenrn Call CheckChild(Node.Child, bCheck, True, True) '对子节点rn End Ifrn If bNext Thenrn Call CheckChild(Node.Next, bCheck, True, bChild) '对同一层节点rn End Ifrn End IfrnEnd SubrnrnPrivate Sub TreeView11_NodeCheck(ByVal Node As MSComctlLib.Node)rn Call CheckChild(Node, Node.Checked, False, True) '处理子节点rnEnd Subrnrn2rnPrivate Sub TreeView1_NodeCheck(ByVal Node As MSComctlLib.Node)rn Dim i As Longrn Dim NodX As Nodern Set NodX = Nodernrn '这里是处理如果该节点的子节点被选掉,则该父节点以至于上溯到根节点都被选掉rn Do While NodX.Root <> NodXrn If NodX.Checked = False And NodX.Root <> NodX Then NodX.Parent.Checked = Falsern Set NodX = NodX.Parentrn Looprn '使用递归,把该节点的字节点都选中rn If Node.Children > 0 Thenrn For i = Node.Child.FirstSibling.Index To Node.Child.LastSibling.Indexrn TreeView1.Nodes.Item(i).Checked = Node.Checkedrn Call TreeView1_NodeCheck(TreeView1.Nodes.Item(i))rn Next irn End Ifrn Set NodX = NothingrnEnd Subrnrnrn1和2 的两种方法 只是 在选择父节点时,子节点作相应变化, 我现在想问的是 如果 所有节点前的 CHECKBOX 都为空(勾都取消) ,现在 我在 某个节点打上勾,那么它的所有父节点也应该有变化 : rn具体变化是这样: 假设所有节点的 CHECKBOX 都为空 ,某个节点的子节点共有3个,当在其中一个子节点上打上勾,那么其子节点的所有父节点(父父节点)都打上 灰色的 勾, 如果3个子节点都打勾,那么这3个子节点的所有父节点(父父节点)都打上 黑 色的 勾 . 如果能把瑞星软件 打开看看和操作一下 其树目录 就能明白我的意思了,请高手帮忙,是否需要用到API函数,因为灰色的勾表示里面只有一部分子节点被选中打勾,而这个灰色是如何做的呢?rnrn
echarts 图表随窗口变化而变化
很多情况下,使用echarts进行统计图制作时需要做自适应效果,能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果,如 造成这个的原因:echarts的图表实例事实上并没有主动的去绑定resize()事件,就是说显示区域大小发生改变内部并不知道,当你需要去做一些自适应的效果的时候,需要使用方主动的去绑定这个事件达到自适应的效果,加上以下代码便可解决。 ...
控件的位置随窗口的变化而变化
rn我用VB.net 写个小工具,如图 一!rn图 1 中的 label控件 (273.0) ,当窗口放大时,label控件的位置就变了,如图二!rn当窗口放大时,如何才能使label控件随窗口的变化而变化呢?rn本人刚接触VB,net 不久,请大家帮帮忙呢,谢谢了!!rnrn图一:rn[img=https://img-bbs.csdn.net/upload/201410/26/1414308628_533719.jpg][/img]rnrn图二:rn[img=https://img-bbs.csdn.net/upload/201410/26/1414308638_437950.jpg][/img]
怎么实现头像随下拉列表变化而变化
onChange后面怎么给变量赋值
请问如何实现单文档上的文本字体随窗口的伸缩而变化
我刚学VC不久,是个菜鸟,之前也看到过很多类似的帖子,但是看不出解决方法。rn 我在单文档上面加了一排文字(作为标题使用),窗口没放大时,看上去标题位置的效果还不错,但是当窗口最大化后,标题就在角落上了。rn 请问各位高手,具体怎么解决,希望能说的详细一点,不胜感激!
怎样实现PB窗口能随分辨率变化而变化?
我在800*600分辨率下做的最大化窗口,但在1024*768中就不行了,请问该怎么样处理?
RichTextBox 如何随 Form 大小的变化而变化?
在Form中插入一个RichTextBox控件,调整RichTextBox的外形尺寸,调整后的布局类似于写字板编辑区域的样式,但是运行后,如果将Form最大化或者用鼠标调整其外形大小,RichTextBox控件仍保持其原来的大小,因此会在Form中出现一定范围的空白区域。请问如何能在对Form最大化或者用鼠标调整其外形大小过程中,RichTextBox控件跟随 Form 大小的变化而成比例的变化,避免空白区域的产生?rnrn谢谢指教!
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数