13518219792
css移动端适配的方法有几种？这篇文章运用了实例代码展示，代码非常详细，可供感兴趣的小伙伴们参考借鉴，希望对大家有所帮助。
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站建设、榆次网络推广、重庆小程序开发、榆次网络营销、榆次企业策划、榆次品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供榆次建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
1.@media screen实现网页布局的自适应
优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。
官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
语法：@media mediatype and|not|only (media feature) { CSS-Code; }
/* 屏幕宽度大于 1200px 则 h6 的字体颜色是black */
h6{
color: black;
}
@media screen and (max-width: 1200px){
h6{
color: #eee;
}
}
/* h6字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
h6{
color: red;
}
}
/* 屏幕宽度小于 320px 则 h6 的字体大小是20px */
@media only screen and (max-width: 320px){
h6{
font-size: 20px;
}
}紧接着我开始接触移动端的适配。
2.rem适配
这个方法是CSDN博主「sxs1995」的原创文章，blog.csdn.net/sxs1995/art…
计算单位是 640px = 6.40rem,
当设计稿的宽度是 750px 时， i = 750； 当设计稿的宽度是 640px 时， i = 640 。
缺点 ： 首次加载页面时，会闪线1-2s，在手机上预览的用户体验不好
!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);3.用@media实现rem适配
优点：当屏幕宽度更改时，只需修改Html元素中的 font-size 即可适配
/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}4.用vw定制rem自适应布局
在掘金上看到作者JowayYoung的灵活运用CSS开发技巧的文章，其中一点是：使用vw定制rem自适应布局
优点 ： 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}以上就是ss移动端适配四种方法的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎关注创新互联行业资讯！
