HTML页面代码移动端和pc兼容,pc端网站如何实现移动端适配?

4、流动布局(fluidgrid)

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 另外,绝对定位(position:absolute)的使用,也要非常小心。

5、选择加载CSS

“自适应网页设计”的核心就是CSS3引入的MediaQuery模块,它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

media=”screenand(max-device-width:400px)”

href=”tinyScreen.css”/>

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width:400px),就加载tinyScreen.css文件。

media=”screenand(min-width:400px)and(max-device-width:600px)”

href=”smallScreen.css”/>

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。 除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

6、CSS的@media规则

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

@mediascreenand(max-device-width:400px){

.column{

float:none;

width:auto;

}

#sidebar{

display:none;

}

}

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

7、图片的自适应(fluidimage)

除了布局和文本,自适应网页设计还必须实现图片的自动缩放。

这只要一行CSS代码:

img{max-width:100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img,object{max-width:100%;}

老版本的IE不支持max-width,所以只好写成:

img{width:100%;}

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

img{-ms-interpolation-mode:bicubic;}

或者,

EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

最好还是做适配分辨率的图片,有很多方法可以做到同样效果,服务器端和客户端都可以实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355890.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linkedblockingqueue 后 take 不消化_消化不良的成因及护理

疾病名称:消化不良就诊科室:消化内科疾病成因心理和精神的不良应激:患者的精神不愉快、长期闷闷不乐或突然受到猛烈的刺激等均可引起。不良饮食习惯:包括刺激性食物(咖啡、浓茶、甜食、油腻、生冷等)和不良…

功能与命令式编程。 Java 8中的斐波那契,素数和阶乘

有多种编程风格/范例,但是两种著名的风格是Imperative和Functional 。 命令式编程是最主要的范例,因为几乎所有主流语言(C ,Java,C#)都在推广它。 但是在最近几年中,函数式编程开始…

Yandex.Algorithm 2011 Round 2 D. Powerful array 莫队

题目链接:点击传送D. Powerful arraytime limit per test5 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputAn array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary subarray al, al  …

html 形状div,div+css实现各种形状(精心整理)

1.正方形.div {width: 100px;height: 100px;background: red;}2.矩形.div {width: 200px;height: 100px;background: red;}3.圆形.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}4.椭圆.div {w…

4.1.5事件

用事件有一种监听的思想 一个事件对应一个委托 事件是委托类型 一个事件对应一个委托,委托可以对应多个方法 如气球爆炸了 气球的反应 小孩的反应 事件源有代码自动激发事件 扔出事件 —————————————— 3.只能在类的内部触发事件 4.可以在内部…

485不用双绞线可以吗_现在在上海,挡风玻璃可以一个标志都不用贴吗?

问近日,有市民咨询:现在在上海,车上挡风玻璃可以一个标志都不用贴吗?答可以一个标志都不贴。自2020年3月1日起,本市机动车在本市办理注册、变更、转移登记和核发检验标志、补换检验标志业务时,将自动生成检…

Java和Python中类似Kotlin的生成器,续:附加参数

介绍 在今天的文章中,我们将继续上周的文章,内容涉及用Java和Python制作类似于Kotlin的构建器,扩展构建器API以采用一些可选参数来提高灵活性。 我们继续我们HTML示例,尝试添加标记属性,例如类,id和样式。 …

vs2015 html页面没有试图,vs2015 web设计视图假死,求帮助

你好,首先,请在发送一个请求去验证你的MSDN账号。然后,从你的描述来看,即使创建新项目,VS的design界面出现不了还是你的VS安装有问题。我们可以从两方面考虑:1.系统环境建议你检查一下Windows系统更新&…

nodejs 之 nvm和pm2

说道 node不得不提到nodejs的版本管理nvm和Node应用的进程管理器pm2。 当然,关于这两个的介绍的文章那么多,随意baidu,bing,google就可以。 我这里是给自己打一个标签,方便日后 查询, 二是方便一些和我一样的小白,能速…

2021上饶市高考中考成绩查询,2021年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口...

2018年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口2018年上饶高考结束了,可是上饶中考又来了!6月注定是一个不平淡的月份。又一大批孩子朝着青春出发踏着坚定的脚步,行走在如火的六月。宁静的清晨,静谧的夜,那条反反复复走…

vue 实例化几种方式_vue注册组件的几种方式总结

vue注册组件的几种方式总结 1、全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component(tag-name,{}) 2、局部注册 var Child = {template: A custom component! } new Vue({// ... components: {// 将只在父模板可用 my-component: Child } }) 3、扩展实例 // 定…

gson json和类转换_带有GSON和抽象类的JSON

gson json和类转换经过多年使用org.json库在Java中支持JSON数据交换格式后,我已切换到Google Gson 。 org.json是一个较低层的库,因此您必须创建JSONObject,JSONArray,JSONString等…并执行其他低层工作。 Gson简化了这项工作。 它…

自考18年4月计算机应用基础,2019年自学考试计算机应用基础试题(18)

2019年4月自考报名已经拉开序幕,同学们可以开始准备自考复习,下面是2019年自学考试计算机应用基础试题(18),了解更多自学考试资讯请锁定自学考试网,更有海量模拟试题,精品复习资料等你来下载!1.Windows 中删除文件夹的…

git中文件的三种状态

用xcode的时候,左侧栏文件的邮右边时不时会看到M,A这一类的字母。当然,这些以后再写上。先说一下git里文件的三种状态 已提交(committed) 已经提交的本地仓库(repository),需要手动…

创建一个带参数的formgoup_gin框架如何获取带文件的formData请求?

**前端代码如下**function upFile() {var formData new FormDatavar file document.getElementById("upload").files[0]var text document.getElementById("text").valueformData.append("upload",file)formData.append("text",tex…

如何从URL查询字符串获得/附加视图参数(示例)?

让我们剖析几个简单的用例,并查看视图参数的工作原理(视图参数名称不是强制性的,以匹配通过URL查询字符串传递的请求参数,但在本文中,我们将重点讨论这种情况): 情况1 在index.xhtml页面中&…

桌面怎么设置 计算机 网络,Win10 10130桌面电脑网络图标怎么设置?

越来越多朋友的计算机安装Windows10系统,现在Windows10系统已经升级到10130版,我的计算机升级到了10130版。安装Windows10的10130版系统后,桌面只有回收站和软媒的图标,如何把电脑、网络、用户的文件、控制面板等图标设置到桌面上…

swift 打开第三方应用_iOS卡通人物帧动画入门9(大结局):番外篇-扩展第三方类

扩展第三方类细心的朋友可能会发现,我们前面计算主角的大小用的总是同一方向第一帧纹理的大小,如果纹理大小有出入的话,会产生较大的偏差,最好的方法是取当前动画帧纹理的大小。不过这有些难度,所以我们退之求其次&…

awk说明书(转)

ref:http://blog.chinaunix.net/uid-429659-id-122573.html awk使用手册 作者:awk使用手册什么是awk? 你可能对UNIX比较熟悉,但你可能对awk很陌生,这一点也不奇怪,的确,与其优秀的功能相比,awk…

jpa jdbc jndi_没有J2EE容器的JNDI和JPA

jpa jdbc jndi我们希望通过尽可能简单的设置来测试一些JPA代码。 计划仅使用Java和Maven,不使用应用程序服务器或其他J2EE容器。 我们的JPA配置需要两件事才能成功运行: 数据库来存储数据, JNDI访问数据库。 这篇文章分为两个部分。 第一部…