关于html屏幕自适应的问题

h5写了

 <meta name="viewpoint" ......>之

后要实现pc、手机自适应时,是需要引入两个分别适应于pc和手机的css文件js文件吗?

1

9个回答

做响应式网站,bootstrap就是自适应不同设备的

这个问题要在网页中判断是电脑还是手机设备



这个代码放在网页头文件里的css就好啦

0

建议去看看bootstramp

0




0

http://paste.ubuntu.com/11702600/
这个评论无法放代码

0

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

手机端只需要作些许调整,覆盖按照电脑版写的css,一般浮动的改成不浮动就可以很好兼容移动端

通过@media screen控制网站在移动端显示

0

手机和pc差太多了,单写两套吧。这样实现效果也不会好

0

bootstrap,你值得拥有。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html高度自适应问题
今天在网上找高度自适应问题,这个问题真的好烦,找了好久都是没用的答案。rn后来找到一个高度自适应的网站,查看了一下代码,发现:rn       在样式表中定义html和body标签的都为height:100%,这样在页面中写入div的时候样式写为height:100%,这个div就能自适应高度100%了。rn       后来我查看了好多网站:高度自适应的原理是继承父级的高度,只要父级高度heig
Unity项目发布后屏幕自适应问题
作者文字纯手打,请珍惜劳动成果,如需转载请联系作者,个人主页soundbird.cn    阅读此篇文章之前,你应该初步熟悉Unity的UGUI系统操作。    如果仅想实现屏幕自适应,那么只需观看斜体带下划线的文字即可,其他的文字都是解释。    我们都知道,不同的设备,屏幕分辨率也通常是不同的,我们开发游戏或者应用的时候肯定要考虑到这个问题,总不能只在开发者你的手机上运行吧,那么这篇文...
UGUI-屏幕自适应
UGUI的屏幕自适应问题,其实是就是画布的设置,要根据游戏是横屏还是竖屏来进行相应的设置。nn我们先来看一下Canvas的官方描述,这里只看前几句:nnclass in UnityEngine.UInnInherits from:EventSystems.UIBehaviournnThe Canvas Scaler component is used for controlling the ove...
HTML5----响应式(自适应)网页设计(自动适应屏幕大小)
@media与@media screen两者在手机设备上没有区别,但@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。
关于Unity中的UGUI的屏幕自适应(多分配率适配)
前言:最近在学习UGUI,在学习UGUI当中的屏幕自适应的时候出现了问题,搞的我很头疼,于是在网上查了很多资料,花了一晚上的时间,其实当时还是没想明白,但夜里突然失眠了,于是想了想昨天晚上看的资料,突然灵光一闪好像明白了点什么,为了方便以后的查阅,因此也就有了这篇文章。好了咱们废话不多说 ~想要明白UGUI的屏幕自适应(多分配率适配)首先你要明白:Canvas和锚点有什么区别?因为在进行适配的时候...
前端页面 屏幕自适应 踩坑日记(一) rem
使用rem做尺寸单位时,尤其注意在非文本元素中的 inline-block,line-height,的使用,若没有设定font-size,它是以根元素的font-size为基准的,若使用一定记得加font-size...
margin自适应
之前写自适应网页都是用百分比来确定元素的宽度的,但是百分比确定宽度在同一行有两个元素,且第一个元素宽度不需要变动的情况下就不怎么好用了。rnrnrn比如 用户名: 的情况,span标签的宽度是不需要变动的,而input标签的宽度需要自适应。rn这种情况下如果设定span标签为固定的值,而input的宽度为百分比的话,就会出现问题。rnrnrn后来在网上查了一下,原来还可以使用margin来自适应,
虚拟机屏幕自适应问题
尝试了所有办法,花费了好几个小时1.尝试改变分辨率。将虚拟机系统分辨率改为同电脑分辨率相同,不可以。(注:但是之前用这种方法成功过,说明还是有用的)2.安装VMware Tools。按照  查看—&amp;gt;立即适应客户机/立即适应大小(发现不可选)                                             查看---&amp;gt;自动调整大小(已选,但是没用)3.重装VMwa...
前端移动开发屏幕自适应的最好办法
前言nn因为移动端屏幕尺寸大小不一,前端开发的时候,往往根据psd大估摸的进行开发,利用百分比进行兼容nn这样做出来的页面和psd可能非常不一样,且开发缓慢nn nn目的nn1、开发者只需要量取psd的尺寸直接写到css中,无需考虑屏幕兼容nn2、系统根据屏幕大小自动生成相应的css尺寸,小屏自动缩放,大屏自动放大,完全和psd相同nn nn解决方案nn我们在写css的时候在相关尺寸的地方换一种方...
前端浏览器,屏幕自适应技巧以及导航技巧
1、图片:只需要设置宽度(因为图片本身已有尺寸,只需设置合适宽度,高度图片会自适应)n2、图示效果实现nnnhtmlnnnnnn首页n产品与服务n官方博客-->n关于我们n联系我们nnnnncssnnnn.nav_mid li{n    float: left;n    list-style-type: none;n    width: 100p
js 解决移动端自适应屏幕
很多人说  使用rem单位,就能解决自适应问题。接下来就讲讲如何实现的。rnrnrn首先你要知道psd图的宽度,比如是750px,rnrnrn然后就是利用 js 去设置下 font-size,如下:rnrn    rn        var w = $(window).width();rn        $("html").css("font-size", w / 750*100 + "px");
NGUI屏幕自适应所需文件
NGUI屏幕自适应,可用于2D和3D,2D屏幕自适应的方法参考我的博客文章:《NGUI-2D屏幕自适应》
js自适应任何设备屏幕
function bodyScale(){rnvar devicewidth=document.documentElement.clientWidth;rnvar scale=devicewidth/640;rndocument.body.style.zoom=scale;rn}rnwindow.onload=window.onresize=function(){rnbodyScale();rn}
移动端页面自适应代码
当有引用jQ或者Zepto版本库时候:(function(){(window).resize(infinite); n function infinite() { n var htmlWidth = (‘html’).width(); n if (htmlWidth >= 640) {(“html”).css({ n “font-size” : “40px”
Html移动端自适应
Html5刮刮卡页面,自适应各种手机端
head之间的一些meta和屏幕自适应的一些元素
meta标签,这些meta标签在开发web app时起到非常重要的作用nn(1)n(2)n  //允许全屏模式浏览nn(3)nn(4)nnn第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
html页面适配兼容问题
1.背景:nn许多情况如果开发的页面只是内部的成员自己应用,则只要在一种浏览器中显示功能正常即可;如果开发的网站是面向用户的,则要考虑到用户的使用的浏览器的不同,则要做到主流的浏览器中,页面的功能均可以正常使用。这是就会涉及到不同浏览器的适配问题,首先要考虑到目前浏览器的解析内核的区别,目前浏览器内核主要分为两大类,chrome和IE。像QQ浏览器、Firefox等与IE的解析内核相同,而360、...
NGUI屏幕自适应
NGUI屏幕自适应
关于移动端自适应屏幕几种方法浅析
       屏幕自适应说白了是指我们写的网页能够在不同屏幕大小的移动设备上自动调整元素的大小,常见的有几种方法,如rem自适应、使用媒体查询@media、动态设置meta viewpoint的device及minimum-scale、maximum-scale大小等方法。nn       1、rem自适应(js方式)nn        rem是相对于根元素(html)的font-size大小,因...
屏幕自适应
从事前端开发的工作者都知道,一个网页的宽高通常都是固定的。而如果我们设置了固定的宽高,当屏幕大小发生变化或者用户设备的显示器大小与开发者的设备显示器不一时,用户则需要滑动上下左右滚动条才能浏览整个网页。而如果我们设置宽高为100%同时又设置了背景图或者背景颜色,那么只有浏览器窗口大小就决定了背景图或者背景颜色的填充大小,而网页的超出部分将会默认为白色就会显得非常难看。rn如下图:rnrnrn正常显
Unity3D UGUI显示3D特效
在Unity UGUI下显示3D特效,如粒子特效、Mesh UV特效等,解决不同分辨率手机下的屏幕自适应问题、显示叠层问题。
html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸的手机适配问题
html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸的手机适配问题
Unity自适应策略
Unity自适应策略实验方式:在Game窗格中选取常见分辨率依次查看,还能选择最后一个+,自定义分辨率: 傻瓜式CanvasScaler + Rect Transform(纯GUI操作,无需写脚本):调节最外层画布的Canvas Scaler,为Scale With Screen Size。下面有拉伸/压缩/按长宽比例进行伸缩等模式,调节成一个对多数屏幕都较为友好的参数。参考:https://do...
Flash 程序屏幕自适应的实现
首先确定一个最外层的容器,针对于一下两种情况作处理rn1、其内部的不超出初始设定的大小,运行时也不会超出其大小rn(1)在最外层的容器类的初始化中,增加以下代码rn[code=&quot;java&quot;]rnthis.onResize();rnApp.stage.addEventListener(Event.RESIZE,this.onResize);rn[/code]rn(2)增加如下监听处理方法rn[cod...
多分辨率屏幕自适应
多分辨率屏幕自适应
unity屏幕自适应
  下面以竖屏游戏为例,步骤如下:nn1.新建工程nn2.选择发布平台。File--BuildSettings...--PlatForm里面选择平台--Switch Platformnn3.Ctrl+S保存新场景。nn4.在Game视图设置分辨率。如果是竖屏,则选择WXGA Portrait(800*1280)nn5.如果使用ugui,则将Canvas设置如下图:nnnnnn...
HTML5 移动页面自适应手机屏幕四种方法
1、使用meta标签:viewportnnH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。nn nnviewport 是用户网页的可视区域。翻译为中文可以叫做&quot;视区&quot;。nn手机浏览器是把页面放在一个虚拟的&quot;窗口&quot;(viewport)中,通常这个虚拟的&quot;窗口&quot;(viewport)比屏幕宽,这...
Kanrisha 手机网页自适应Dashboard
H5手机网页适配模板,使用css3,JavaScript,html编写的超炫酷HTML模板,手机移动端及电脑端屏幕自适应
实现自适应页面的方法,适合APP开发
实现自适应设置jq方法:(要引用jq)rnvar width=$(window).width()rn    var size=width/10rn    size = size +"px"rn    $("html").css("font-size",size)rn    $(window).resize(function() {rn        var width=$(window).widt
Unity中UGUI的屏幕自适应
随着游戏设备的不断增加,屏幕的分辨率也越来越多,所以针对不同的屏幕分辨率,Unity中也提供了分辨率自适应的机制。游戏中的分辨率自适应主要做两方面的工作:①、调整画布组件   ②、调整锚点调整画布组件:UGUI中Canvas Scaler组件是调整整体缩放的,有三种模式:Constant Pixel Size:固定像素尺寸,在任何分辨率下都不会进行缩放拉伸,只能通过改变Scale Factor才能...
HTML中关于表格的一些问题
有时候表格外边框与&amp;lt;tr&amp;gt;外边框不能完全重合,可以用border-collapse: collapse;来解决问题
css实现屏幕自适应(仿谷歌静态页面)
昨天写了一篇nodejs之客户端的实现,以及http模块的讲解。然后不知道为什么没有保存下来,我好沮丧。 n于是现在不想写node了,接下来这段时间,可能说得更多的是css和html相关的东西。因为要做项目了,好开心。而任务主要是做界面,好久没有碰css和html,怕生疏了。 n前言 n今天看谷歌的时候发现它居然做的是自适应,然而百度居然没有做 n贴个百度的界面 n n吐槽一下: n1、没有自适应
常见问题汇总(四)——关于CSS与HTML
1 style标签无法自动提醒Css样式应写在body标签前,head标签后2 id选择器无法生效id命名不可以使用数字
frameset框架
frameset 关于html的frameset问题(框架使用示例)
Unity流水账0:NGUI屏幕自适应
1.size解释:在2DUI中,摄像机常使用平行投影的camera(orthographic),其中size的含义是屏幕高度的一半,其单位不是像素而是unit坐标,即通过pixels to units换算的坐标。例如:屏幕高度为640,pixels to units为100的情况下,orthographic size为640/2/100 = 3.2(经过实际测试orthographic size ...
HTML+CSSS3自动适应屏幕宽度笔记
在公司新接到一个业务升级项目,其中一个小需求为:rn【页面显示优化:自动调整页面 使页面在IE8 IE9 浏览器的  1024*768   和 1366*768分辨率下能完全显示】。rnrnrnrn大概截图如下:rnrnrnrnrn 这里是使用的1024*768的分辨率,顶部从右向左为login,headbar,logo三个div,前两个右浮动,最后一个左浮加载到顶部div中(前人写的代码,在这里
android手游屏幕自适应开发思路
android手游屏幕自适应开发思路
UGUI屏幕自适应实现
-
jquery 自适应屏幕大小
// $(document).ready(function(){ n // //初始化宽度、高度 n // $(".content-out-huo").width($(window).width()); n // $(".content-out-huo").height($(window).height()); n // //当文档窗口发生改变时 触发 n //
瀑布流介绍和效果展示
1、涵盖瀑布流具体实现的所有知识点,属于纯实战教程n2、定位式的瀑布流内涵盖屏幕自适应问题
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 关于大数据培训 关于云计算