1. 对于web前端适配多端有什么解决方案
适配多端 = 响应式设计页面,
bootstrap 参考这个插件的响应式设计布局 或者 amaze ui 里面都有详细的讲解响应式的原理以及用法,
2. 前端开发手机端时怎么做到自适应布局
用百分比做布局和板块!
3. web前端如何让网页布局稳定性和标准性
为了实现网页布局的稳定性和标准性,我们可以从下面几方面努力:
一、 <!DOCTYPE> 标记的重要性。
位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<!DOCTYPE>标记为 所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有 效的XHTML文档,并按指定的文档类型进行解析。
<!DOCTYPE> 标记和浏览器的兼容性相关,删除<!DOCTYPE>,就是把如何展示HTML页面的权利交给浏览器, 这 时,IE6,IE7,IE8,Firefox2,Firefox3,Chrome,有多少种浏览器,页面就有可能有多少中显示效果,这是不被允许的。
二、合适地方用到合适的标签
物尽其用人尽其才。 再合适的地方用到合理的标签,对网页布局和优化都有很多的好处,比如logo ,一般我们都用h1 标签包括。 还有理解行内元素和块级元素的区别。
一个页面不要只用div,太多反而太泛滥了。table虽然用的少,但是,再做一些数据处理的时候,还是比较好用的。
三、站在标准流的角度看padding 和 maring 、width等属性稳定性
我们知道页面布局的时候,控制盒子位置距离等,有盒子本身大小,padding和margin来做。
因此,再这里我们会根据稳定性来看这三者的先后顺序:
其中稳定性最好的就是盒子本身的高度和宽度了,我们优先考虑这个。 因此,很多情况下,我们会考虑利用高度剩余法,宽度剩余法来做,而不是padding和margin。
这个评论和下面的文本域框有个小距离, 此时,我们给这个评论一个h2标签,高度正好从评论上方,到文本域上的高度就好了。
h2 里面文字内容默认是靠左上对齐的,高度用不了,就剩下了,这就是高度剩余法。
其次,我们才考虑padding ,因为padding也可以看做特殊的盒子高度和宽度,最后我们再用margin来做。因为margin会有边距合并的问题。
四、标准流、浮动流和定位的稳定性
标准流再里面是最稳定的,就是块级元素上下显示,行内一行显示,都是最稳定的。
浮动和定位都“脱标”了,稳定性没那么稳定,所以,我们应该遵循如下原则:
页面布局,能用标准流去做的不用浮动去做,如果要用浮动做的,就不用定位去做。
五、知己知彼百战百胜
总会有特殊的浏览器,比如ie6 ,这些奇葩浏览器总是有自己独到的地方,那我们怎办? 兵法云,知己知彼百战百胜,因此,需要我们详细的了解这些浏览器自己独特的特性,或者掌握他们ie6常常出现的bug,以及对于css 的理解,那么我们根据他们的不同解析,写出合理的布局。
六、不要让清除内外边距带来麻烦
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
这句话,大家都知道,清除浏览器样式的。但是如果你不加,不同浏览器肯定显示不太一样。所以,css的第一句话就是它。还有就是要使用大部分浏览支持的css属性不至于引起不必要的麻烦。
4. 前端一套页面如何适配不同分辨率大小的屏幕
这个一般都是使用响应式布局然后做哦,所以可以考虑用bootstrap框架哦。
5. 前端分辨率适配
现在手机屏大小不一,而且屏幕硬件性能也各不相同,一般的UI设计都是基于特定机型画设计搞件的,常见的是基于iPhone6的分辨率设计2倍图,以iPhone6为例,屏幕物理像素宽度是750,网页宽度为375PX。开发中还要根据不同手机留出设计余量,因为不同分辨率的手机显示时会有拉伸位移。
网上也有一些方案,处理高清屏适配方案,但一般也只把DPR适配到2,彩用所有长度单位放大2位,网页整体缩放50%的的做法,比如ant-mobile就支持这种方式,它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小,但是这种方式在遇到网页实际宽度大于375的设备时,还是不能1:1的还源UI设计稿。
我个人在项目中采用的是更复杂的实现方式,可以实现适配DPR大于2的手机屏,并接近100%的还源UI设计稿。具体的适配技术各家大同小异,这里不再细说,我只给出我自己的适配方案。
同大多数适配方法一样,通过 rem 设计一个基础的大小单位 ,做为整个页面的基础单位,再根据屏幕物理DPR结合屏宽计算这个单位的大小,
基础单位 = 屏幕DPR * 网页宽度 / 375(设计稿基准为375)
网页缩放值 = 1 / 屏幕DPR
比如我的方案是把rem设为10px 再乘以“基础单位”,这样在设置一个设计稿上14号字的时候,就写 1.4rem就可以了。另外编写页面布局时,也用这个计算出来的相对单位,这样可以做到不管什么样的屏幕,UI设计搞都不会因宽度变化而变形。另外,如果使用ant-mobile这样的支持高清方案的UI中间件,直接在配置中把它的LESS常量 “@hd”设置 为 “0.1rem”就可以了。
另外还有一个小的福利,就是在这个方案下,当你想画出“1物理像素”的细边框时,直接用 “1px”,就可以了,因为在这个方案下,1px对应的是一个物理像素。
下面给出我实践中使用的适配代码:(这是直接放在HTML文件中的版本)
//计算屏幕比例并设置html的font-size
/**
将html字号设置为10个设计像素(一个基准系数,即rem为10 设计稿像素)
设计一个缩放系数,以应对可能出现的适配高清屏要求
*/
( function () {
/**初始化方法
* _standard 设计稿对应的分辨率
* base_DPR 设定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得当前设备DPR
var dpr = window. devicePixelRatio || 1;
//如果设定了默认最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//设定缩放视图比例
var scale = 1 / dpr;
//设直视图缩放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得当前设备宽度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//标定原稿设计基准值 当前稿件设计宽度为 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//设定基准单位
var base_value = 10;
//基准系数=设备宽度➗稿件基准宽度✖️设备DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//设置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
6. 做好前端需要学习什么
首先肯定是基础的前端知识,html,css,html5,css3,js相关内容,都是你必学的,然后就是设计模式,nodejs,vue,springboot,前后端交互的知识,虽然看起来不多,但是学起来确实不容易。加油,陌生人!!!
7. 前端怎么做iphonex的适配
ios8中可以使用一套UI就可以适配所有的尺寸,包含各尺寸的iphone及ipad。用到的技术是AutoLayout+sizeclass但在未推出自动布局autolayout之前的ios版本,就需要多套UI来适配iphone,ipad了。
8. 如何把web前端网页做成自适应
1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;
只能指定百分比宽度:width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
9. 前端不知道怎么布局
在谈WEB前端怎么布局前,我们先梳理前端的布局类型,具体有以下几种:
1.静态布局:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。
2.流式布局:布局特点是屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
3.自适应布局:自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
4.响应式布局:布局特点是每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
那么我们如何布局呢?通过以下几点来选择布局。
1.如果只做电脑端,最好的选择是静态布局。
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,通过一份css+一份js调节font-size就搞定。
3.如果电脑端,移动端要兼容,而且要求很高,那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。
10. web前端几种常见的网页布局
现在的网页差不多都采用分列布局,
常见的有单列布局(如网络首页)、双列布局、三列布局和混合布局,超过三列的布局很少见。
最简单的要数单列布局了,这种布局适合各种搜索引擎主页,干净的界面和较少的干扰信息给用户较好的体验。