1. 前端CSS适配分辨率问题
经测试,代码本身是没问题的。我的电脑连接了两台显示器,一台是1920*1080的,一台是1440*900的,我用下面的代码:
@media screen and (max-device-width:1440px) and (max-device-height:900px)
在我的小显示器中有响应,大显示器则无响应。
2. 前端分辨率适配
现在手机屏大小不一,而且屏幕硬件性能也各不相同,一般的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);
})();
3. 前端一套代码实现多端适配 有哪些方案
Taro 是京东开源的一套遵循 React 语法规范的多端开发解决方案。通过它,我们只需要书写一次代码,就可以编译出在不同端(微信 / 网络 / 支付宝小程序、H5、React-Native 等)都能运行的代码。如果你接触过 React-Native,那么上手 Taro 将会非常方便。
4. 前端适配
通过查看不同设备的分辨率,就使用不同的方案,bootstrap用的就是这种适配
优点:pc移动端都能适配。
缺点:区间之内不能适配,且pc移动共用一套不好管理
不需要适配的地方用px,需要适配的地方用该方案
flex布局(弹性布局),可以按比例分配,vw和%是按设备大小分配
rem相对于root 的 font-size适配大小,因此通过改变root 的 font-size改变全局适配大小,
设计稿规定设备width=750px时,字体大小为30px
先将html:{font-size:30px}
如果一容器需要width=90px;就设置width=3rem
然后监听设备宽度变换
先根据设计稿设计好固定宽高,然后根据设备宽高算出缩放比例进行缩放
5. web前端怎么做适配
固定一个某些宽度,使用一个模式,加上少许的媒体查询方案
使用flexbox解决方案
使用百分比加媒体查询
使用rem
6. 前端技术,屏幕适配技术怎么做
屏幕适配有两种方法:
1.把页面做成100%自动,页面随屏幕的大小而变化,屏幕多大页面多大。
2.通过媒体查询来判断屏幕的大小,根据不同大小的屏幕加载不同样式。
7. 前端开发中,在做pc端的全屏页面时,怎样进行适配
不太明白你要做到什么效果,如果是覆盖电脑整屏的遮罩的话是这样的
.y{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
background-color:rgba(0,0,0,.3) ;
}
8. 前端屏幕适配缩放全屏
前端屏幕适配缩放全屏步骤如下:
1、打开一个网页,在网页的右上方找到一个查看选项。
2、点击查看选项,下面出现一个下拉菜单,找到网页缩放选项。
3、把鼠标移动到网页缩放选项上,自动弹出一个列表菜单,里面就是缩放的比例,只要选择默认也就是100%就OK了,网页就能满屏适应电脑界面了。
9. 前端怎么做iphonex的适配
ios8中可以使用一套UI就可以适配所有的尺寸,包含各尺寸的iphone及ipad。用到的技术是AutoLayout+sizeclass但在未推出自动布局autolayout之前的ios版本,就需要多套UI来适配iphone,ipad了。
10. 零基础小白想学前端如何开始
前端从入门到精通要经历哪些阶段?下面,就给大家分享一下。
1、PC端页面制作与动画特效
学习HTML+CSS搭建网页、CSS动画特效、PhotoShop切图等基础知识,获得初级Web前端工程师技能,主要进行PC端网页制作与样式设计实现,能够配合UI设计师进行项目开发。
2、移动端页面制作与响应式实现
讲解移动端布局与设备适配、响应式设计与实现等,获得移动端页面适配工程师技能,主要进行移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸,并能利用响应式进行移动端与PC端适配。
3、JavaScript与jQuery开发
同HTML5基础知识一样,JavaScript开发与jQuery开发是职业晋升必备的技能包,获得中级Web开发工程师技能,主要进行页面行为交互,实现网站常见特效,加轮播图,选项卡,拖拽效果等,并能配合UI和后端进行项目开发。
4、HTML5高级框架技术开发
常用的Vue框架开发,React框架开发,Angular框架开发,数据可视化技术。可获得中级Web前端工程师技能,主要适用框架开发企业项目,实现单页面应用开发。可以完成复杂的数据交互应用场景,具备独立开发项目能力。
5、全栈前后端技术开发
Node.JS技术,其他后端技术,如Java或PHP。可获得高级Web前端工程师技能,主要进行前后端全栈样式开发,能独立完成一个中小型项目的前后台,对于网站开发有着非常熟练的编程能力。
可以从零开始,一步步的掌握前端开发的各项相关技能,最终达到企业对初级前端开发工程师、中级前端开发工程师、高级开发工程师等职位的要求。
学web前端一般在2万左右,4-6个月左右的时间。应该根据自己的实际需求去地看一下,面授的,先好好试听之后,再选择适合自己的。只要努力学到真东西,前途自然不会差。