前端多终端自适应网页开发模式

智能移动终端大爆发的现阶段,手机访问网页已经成为人们不可或缺的使用习惯,开发自适应网页大势所趋,实际上无论改造还是开发本身并不复杂,但是掌握更好的开发模式会使得你编写页面更加高效快捷

所属分类 WEB

相关标签 CSS自适应覆写

关于自适应网页

所谓自适应网页,通过屏幕的宽度实现加载对应的CSS样式表,提高移动终端的访问体验。

自适应网页主要用于解决,PC网页在移动端显示出现字体过小、模块错位、浮动遮挡等不良体验。

实际上网页无论是否进行了自适应,通过手机/平板等移动终端都是可以访问的。

但是对网页做移动端自适应适配,在如今是非常有必要的。

自适应三要素

自适应网页开发简单归纳为以下三大要素:

  1. 选定关键屏幕宽度判断
    当你要开始进行自适应网页开发的时候,你需要在内心中有大致的布局,明确需要开发几套自适应的配套模板。
    然后通过指定min-width and max-width(选定关键屏幕判断)进行CSS覆写。
  2. 宽高尽量使用百分比
    自适应网页更多的时候是为了给移动终端带来更好的访问体验,但是移动终端的种类繁多,特别是屏幕尺寸应有尽有。
    你不可能对所有的宽度都开发模板,那样工作量太大而且没有意义。
    因此如果对元素的各项px属性均指定为百分比,就可以一套自适应模板适配于各类尺寸的屏幕中。
  3. 遵循代码聚合的原则
    开发自适应网页需要覆写大量的CSS,在开发过程中尽量规划某一个区域专门进行代码编写。
    否则将有可能出现大量冗余样式(特别是大量冗余的屏幕尺寸判断语句)以及样式冲突,对于后期调试极为不利。

自适应开发方式

实际上自适应开发是一件非常简单的事情。

其麻烦并不在于技术,而是对整个网页的CSS样式进行重新编写,这是一个比较浩大的工作。

那么如何进行自适应开发呢?

首先网页的head区域要标注一个这样的viewport元标签。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <!-- 网页的宽度自动适应手机屏幕的宽度 --> 
    <!-- width=device-width :表示宽度是设备屏幕的宽度 --> 
    <!-- initial-scale=1.0:表示初始的缩放比例,1.0就是占网页的100% -->
    <!-- minimum-scale=1.0:表示最小的缩放比例 -->
    <!-- maximum-scale=1.0:表示最大的缩放比例 -->
    <!-- user-scalable=no:表示用户不可以调整缩放比例 --> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
</html>

在原来的CSS文件中增加覆写,举例说明。

案例已经完全包括了自适应开发中应用到的所有方法,比较简单。

/*原始的网页样式*/ 
.container {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}
/*当屏幕宽度小于等于991px时,一般多为手机*/ 
/*className为container的元素宽度为100%*/
@media (max-width: 991px) {
    .container {
        width: 100% 
    }
}
/*当屏幕宽度大于等于992px且小于等于1099px时,一般多为平板*/
/*className为container的元素宽度为90%*/
@media (min-width: 992px) and (max-width: 1099px) {
    .container {
        width: 90%
    }
} 
/*当屏幕宽度大于等于1100px时,常规电脑*/
/*className为container的元素宽度为1100px*/
/*此处用于举例,实际这个样式是多余了,默认就是>1100px*/
@media (min-width: 1100px) {
    .container {
        width: 1100px
    }
}

我们将根据CSS样式渲染生效原则,在这里简单提一下

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式

关于这么多种样式生效类型,就不一一介绍了,这属于CSS的基础。

定义一个全新的文件,与原来的CSS样式文件互不干扰。

值得注意的是,自适应的样式表一定要放在原始样式表的下面。

CSS样式渲染生效还有一个基本原则就是,后者覆写前者(或者又称为距离元素最近的样式生效)

这种方式与传统方式的差异在于不需要指定大量的@media标签在CSS文件中,与源CSS样式表分开,易读性高。

在开发的时候就和正常编写CSS样式一致,更为高效。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <!-- 原始的样式表 -->
    <link rel="stylesheet" href="/static/css/index.css">
    <!-- 当屏幕宽度低于768px时会加载这个CSS文件 -->
    <link rel="stylesheet" href="/static/css/mobile.css" media="screen and (max-width:768px)">
</head>
</html>

结尾小结

实际开发中更加推荐使用第二种开发模式:

  • 不需要指定大量的@media标签(判断屏幕宽度)
  • 保留的编写CSS样式表的习惯
  • 对于需要适配多种尺寸终端,只需要引用指定的CSS文件
  • 对于旧版网页改造无需破坏原有的样式,直接引入新文件即可

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

clipboard.js实现一键复制

clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

Jquery中.attr()和.prop()方法

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核