首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最佳网页宽度及其实现

设计网页的时候,确定宽度是一件很苦恼的事。 以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。...第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。 第一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。...首先,网页的缺省宽度,确定为满足1024px宽度的显示器。...其次,网页宽度会在780px-1260px的范围内,自动变化,即最小不小于780px,最大不超过1280px。 最后,对于更大的分辨率,网页内容会自动居中。 4. 下面就是CSS文件的写法,只要4行。...min-width: 780px; max-width: 1260px; 这二行规定了网页的最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效的。

1.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

网页滚动条占用网页宽度导致网页抖动问题

起因 最近使用bootstrap构建布局时,我发现不同页面container的x轴起始位置有些许不同,大概有几像素的变动,后来经过一个小时的排查发现不是代码书写问题,而是页面的滚动条也占用网页宽度,所以有滚动条的页面和没有滚动条的页面...body的宽度是不一致的。...一测试确实好用,只需要两条css语句,如下: body { margin-right: calc(-1 * (100vw - 100%)); overflow-x: hidden; } 100vw是浏览器的宽度...,100%时页面的宽度,所以100vw - 100%就是滚动条的宽度,没有滚动条的页面这样计算完是0,然后利用margin可以为负值,让右边距为负值的滚动条宽度,这样有滚动条的页面就与没有滚动条的页面宽度一致了

1.3K20

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth...网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft...网页被卷去的高: document.body.scrollTop 网页被卷去的左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左...document.body. clientWidth表示HTML文档所在窗口的当前宽度。 实现代码 < !...(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

8K30

【最佳网页宽度及其实现】「建议收藏」

设计网页的时候,确定宽度是一件很苦恼的事。 以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。...第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。 第一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。...首先,网页的缺省宽度,确定为满足1024px宽度的显示器。...其次,网页宽度会在780px-1260px的范围内,自动变化,即最小不小于780px,最大不超过1280px。 最后,对于更大的分辨率,网页内容会自动居中。 4. 下面就是CSS文件的写法,只要4行。...margin: 10px auto; 这一行保证了网页在任何分辨率下,都会居中。 min-width: 780px; max-width: 1260px; 这二行规定了网页的最小和最大宽度

78410

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth...(包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth  网页正文全文高...:document.body.scrollHeight  网页被卷去的高:document.body.scrollTop  网页被卷去的左:document.body.scrollLeft  网页正文部分上...document.body. clientWidth表示HTML文档所在窗口的当前宽度。 实现代码 <!...(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

16K10

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

一、视口标签设置 参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例...= 设备宽度 , 即 理想视口 ; user-scalable=no 样式 设置 用户是否可以手动缩放网页 ; 可设置 yes / no , 或者 1 / 0 ; initial-scale 样式 设置...在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体 标签设置 100% 宽度 ; 2、设置布局最大宽度 将 京东 手机端页面 , 拉倒最大便不再放大..., 这是因为该页面设置了最小宽度 ; 一般设置最小宽度 320 像素 , 智能手机中的屏幕如果是 320 像素 , 这就是最小的手机屏幕了 ; 4、查看网页最大最小宽度 进入京东页面 , 按 F12...进入调试模式 , 可以看到最大宽度是 1080 像素 , 最小宽度是 320 像素 ; 5、布局宽度设置 body { /* 网页布局宽度 = 设备宽度 */ width: 100%

2.3K10

js实现:输入密码才能打开网页js实现密码保护的网页

js实现:输入密码才能打开网页,即js实现密码保护的网页。...(password()); 可能有人会疑虑,密码就在代码中,如果别人查看一下源码就知道密码了, 嗯哪,确实存在这个问题,虽然上面代码中做了些防护,如果密码输不对的话,就返回上一页,但只要在浏览器中关掉js...功能就可以打开网页查看js源码, 那么如何解决呢?...当然有办法,使用js密码加密混淆啊,出大招:Jshaman(http://www.jshaman.com/),可以在线加密js代码, 就把上面的代码,用jshaman加密一下,加密后代码如下: var...js实现密码保护的网页,就是这么简单。 PS:有网友问,上面的代码怎么用。哦,很初级的问题,这样:在html文件中,放在script标签里就可以了。

5.6K30
领券