网页在不同屏幕下的自适应

今天把我写的一个网页发给老师了，他在电脑上显示的时候网页内容都错位了，我在代码head部分添加了

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

这段代码，但是还是不能宽度自适应，最后把代码中的宽度都用%来代替才能自适应屏幕。

所以，将代码中的宽度高度都用%来表示，页面就会自适应屏幕宽度。

时间： 2024-10-05 04:58:07

网页在不同屏幕下的自适应的相关文章

image-set实现Retina屏幕下图片显示[转载]

最近一直在学习Retina屏幕下图片的处理方法,从<走向视网膜(Retina)的Web时代>一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在<移动Web——CSS为Retian屏幕替换图片>和<使用css sprites来优化你的网站在Retina屏幕下显示>中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来<Web设计师如何制作Retina图像>学习了Retina屏幕下的图片制作技巧.

网页适配之强制网页适配手机屏幕

切图微适配(weishipei.qietu.com) 讯:如何强制pc网站在手机屏幕下适配呢,切图微适配团队教你一个简单有效的解决方案,通过增加meta标签来实现: 第一个meta标签表示: 强制让文档与设备的宽度保持1:1: 文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值): user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小. 当然加了这个之后,还需要通过css代码来细微的调整才能达到网页在移动设备下适配并

image-set实现Retina屏幕下图片显示详细介绍

支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像: Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像. 上面就是有关于“image-set”的简单介绍. 为什么要使用image-set而不使用Media Queries? 如果你有阅读有关于Retina的文章,你就会知道,在Retina屏幕下实现图像显示

解决Button在IE6、7下的自适应宽度问题

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它. 写一个Button,有两种方式:其一,直接button标签:其二,input type=”button”. 不管哪种方式,Button的宽度在IE6.7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在. 1.一个普通的Button: 可以很直接的看到Button的两边有空隙,当然,这个

设置竖直的分割符【使用div】 （根据屏幕的大小自适应）

分割符的设置: <div id="separator" style="float:left; width:1px;  min-height:100% ; background:#808080;  overflow:hidden" ></div> style 设置: <style type="text/css"> body,html{ margin:0; padding: 0; height: 100%; } &

Android手机在不同分辨率情况下字体自适应大小

两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size">30px</dimen>和 values-800x400/strings.xml 里面设置<dimen name="Text_size">30px</dimen> 分别代表480X320 和 800X400分辨率情况下 字号为30px

win7系统扩展双屏幕时，如何在两个屏幕下都显示任务栏

扩展屏幕下都显示任务栏!!! win7系统本身无法设置该功能(目前我是不知道) 但可以下载第三方软件来解决该问题. 第一步:Dual Monitor Taskbar 下载软件 下载链接:http://pan.baidu.com/s/1o61isjw 密码:yzcp 第二步:安装完在扩展屏幕上便会出现任务栏 第三步:在扩展屏下任务栏中右击属性来设置相关的功能. 比如显示Windows按键.可以 镜像-两个任务栏控制同一个页面,也可以设置单独控制自己显示屏页面. 这样便解决了两个屏幕双任务栏的功能了

WPFの获取屏幕分辨率并自适应

原文:WPFの获取屏幕分辨率并自适应 double x = SystemParameters.WorkArea.Width;//得到屏幕工作区域宽度 double y = SystemParameters.WorkArea.Height;//得到屏幕工作区域高度 double x1= SystemParameters.PrimaryScreenWidth;//得到屏幕整体宽度 double y1 = SystemParameters.PrimaryScreenHeight;//得到屏幕整体高度

利用onresize使得div可以随着屏幕大小而自适应的代码

原文:http://www.jb51.net/article/21831.htm 当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位:另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: