首页 > 其他分享 >HTML网页内容适配——标题栏

HTML网页内容适配——标题栏

时间:2023-06-30 12:14:50浏览次数:52  
标签:窗口 适配 标题栏 JS HTML 网页内容

 

  •  前言

现在很多网页用的都是固定标题栏,就像这样:

很多网站为了兼容小窗口还会做个JS适配:

但是如果窗口比这还小的话...

那就只剩下一部分了。

由于设置position:fixed后元素不会随着滚动条滚动,所以超出页面边缘的部分将永远看不见,除非增大窗口或缩小显示比例。

很多设计师忘记考虑这一点了。

 

  • 纯CSS适配

最简单的方法是,在原有的基础上,整体嵌套一层,外层加上滚动条:

  • 加入JS适配

大部分网站就是这么做的,但是有些网站没有对宽度小于1024px做适配。

(大部分浏览器的最小窗口宽度为500px!)

窗口较小时进入折叠模式:

(图中为本页测试功能,暂未实现)

 

  • 下期:瀑布流页面适配

标签:窗口,适配,标题栏,JS,HTML,网页内容
From: https://www.cnblogs.com/LMPro/p/17329220.html

相关文章

  • 关于HTML页以Get方法向asp.net页面传值乱码的解决
    这个问题是最近偶然发现的,朋友说我个人做那个基于Lucene的搜索引擎,存在一个问题,就是只能搜索英文,不能搜索中文。我把代码仔细看了一下,没发现问题,但是在测试的时候确实存在这样的问题。我查看传值之后的参数,全部是乱码或者空格,立即觉得是传递过程中编码的问题。后来在web.config中添......
  • HTML基础
    HTMLHTML历史HTML(HypertextMarkupLanguage)的历史可以追溯到上世纪90年代初,以下是HTML的主要历史阶段:HTML1.0:在1991年发布,是HTML的最初版本,用于创建基本的文本和链接结构,但功能有限。HTML2.0:于1995年发布,引入了一些新的功能和标记,如表格、图像和表单元素。这是互联网早......
  • 第10.3篇 html基础标签
    HTML一、HTML简介1.什么是HTMLHTML:HyperTextMarkupLanguage,超文本标记语言。作用:编写网页。2.写一个简单的HTML<html><head><title>pagetitle</title></head><body><fontcolor="red">hello,kitty&......
  • HTML5(三)H5新增标签
    H5之前,使用div容器元素进行页面定义布局```<divid="header"></div><divid="nav"></div><divid="article"><divid="section"></div></div><divid="aside"></div><d......
  • HTML5--块元素和内联元素
     块元素内联元素(行内元素)在页面中独占一行,自上向下排列不独占一行,只占自身大小可以设置width,height属性设置width,height属性无效包含内联元素和其他块元素包含其他内联元素,不包含块元素常见块元素:div,form,h1~h6,hr,p,table,ul常见内联元素:a,b,......
  • Tips: How to Get the Currently Selected HTML Content in Major Browsers
    functiongetSelectionHtml(){constsel=window.getSelection();if(sel.rangeCount){varcontainer=document.createElement("div");for(vari=0,len=sel.rangeCount;i<len;++i){container.appendCh......
  • html测试报告没内容,怎么办?
    接上一篇,好容易运行之后生成了测试报告report.html,可是一看文件大小,竟然是0kb,顿觉不妙,用浏览器打开一看,竟然是空白的,没内容。 赶紧看报错信息,不是很明白,大概是说需要的是二进制信息,而提供的是字符串格式,没有办法write方法写入。火急火燎的百度报错信息,有说把open的文件关闭后......
  • 串行协议适配器行业市场调研及规模分析报告2023-2029
    2023-2029全球串行协议适配器行业调研及趋势分析报告2022年全球串行协议适配器市场规模约亿元,2018-2022年年复合增长率CAGR约为%,预计未来将持续保持平稳增长的态势,到2029年市场规模将接近亿元,未来六年CAGR为%。从核心市场看,中国串行协议适配器市场占据全球约%的市场份额,为全......
  • Pycharm+unittest+HTMLTestRunner无法生成测试报告文件
    在执行时,遇到一个问题:一直无法生成测试报告(用例能执行,就是无法生成报告)根本原因:PyCharm会默认使用自带的unittest框架来执行单元测试,不会执行main函数中的代码,所以不生成测试报告1、pycharm右上角点击运行方式的下拉列表,选择EditConfigurations2、添加python3、添加脚本路......
  • 自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全
    constgulp=require('gulp');constfs=require('fs');consthtmlmin=require('gulp-htmlmin');constuglify=require('gulp-uglify');constuglifyEs=require('uglify-es');constminifyCSS=require(......