文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

一、webkit 内核 移动端浏览器 都是 基于 webkit 内核的 , QQ 浏览器 / 百度 / Safari / UC 都是基于 webkit 内核的 ; 移动端网页布局需要 兼容 普通浏览器...与 webkit 浏览器 ; webkit 内核浏览器 对 HTML5 + CSS3 支持的很好 , 移动端可以放心使用 H5 标签和 CSS3 样式 , 但是如果在 PC 浏览器使用了这些标签 , 可能导致低版本浏览器不兼容的情况...; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /

1K10

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android...Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法

2.6K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【移动端网页布局】Flex 弹性布局案例 ① ( 案例框架搭建 | html 标签结构框架 | css 初始样式 )

    /normalize.css"> Flex 弹性布局案例 2、css 初始样式 在之前的开发中 , 积累的一些默认 css 样式 , 先设置到 css 样式文件的头部 ; 清除点击高亮样式 , 将点击后的高亮样式设置为...transparent 完成透明 ; * { -webkit-tap-highlight-color: transparent; } 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式...设置列表的默认样式 */ margin: 0; padding: 0; /* 去掉小圆点 */ list-style: none; } 完整代码 : body { /* 网页布局宽度...} /*点击高亮我们需要清除清除 设置为transparent 完成透明*/ * { -webkit-tap-highlight-color: transparent; } /*在移动端浏览器默认的外观在

    26230

    【移动端网页布局】移动端网页布局基础概念 ⑪ ( 移动端布局方式 | 流式布局 | 弹性布局 | 媒体查询布局 | Webkit 样式初始化 | 引入初始化样式文件 | CSS 特殊样式处理 )

    一、移动端常见布局 移动端网页的宽度 就是 屏幕宽度 , 不需要设置版心宽度 , 但是 页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 : 单独制作移动端页面 : 使用 流式布局 , 又称为百分比布局...布局 ; 二、Webkit CSS样式初始化 ---- 1、引入 normalize.css 样式文件 在上一篇 【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页...stylesheet" href="css/normalize.css" type="text/css"> 2、取消链接点击时的高亮效果 链接在手机网页中 , 点击会有高亮效果...DOCTYPE html> <meta http-equiv="X-UA-Compatible...盒子模型样式 */ box-sizing: border-box; } </<em>html</em>

    82820

    【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

    一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局...; 网页不断响应当前设备宽度的变化而进行自适应布局修改 ; 三星页面 https://www.samsung.com/cn/ 在 PC 端的样式 : 手机端访问的是同一个页面 , 响应式页面 制作困难

    3.7K40

    CSS&HTML面经专题——（四）移动端响应式布局

    CSS&HTML面经专题——移动端响应式布局 1、Viewport视口 在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。...视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。...也就是说，在不设置网页viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。...于是出现了一种新的布局方式，宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。后来网页从PC延伸到了手机，以及 HTML5 标准的发布。...rem 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

    2.3K20

    【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

    它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。 在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口 通常比 桌面浏览器中的布局视口 小，因为 移动设备屏幕的大小通常比桌面屏幕小。...布局视口 机械地 将 PC 端网页在手机端呈现 ; Android / iOS 将 布局视口 分辨率 设置为了 980 像素 宽度 , PC 端的网页可以显示在 布局视口 中 ; 如下图所示 , 强行将浏览器的宽屏界面...移动设备浏览器中，设备屏幕较小，页面需要进行缩放以适应屏幕大小，视觉视口 会比 布局视口 小。...理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。 通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

    1.3K30

    【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )

    一、视网膜屏技术 ---- PC 端 和 早期的 移动端 网页中 , CSS 中配置的 1 像素 对应的就是物理屏幕中的 1 像素 ; Retina 视网膜屏幕 技术出现后 , 将多个物理像素压缩到一块屏幕中...CSS 中的 2x2 像素的大小 , 需要一张 2x2 大小的图片 ; 在视网膜屏幕中 , 如果要 填充 CSS 中的 2x2 像素的大小 , 需要一张 4x4 像素大小的图片 ; 在一个 CSS 设置...对于网页设计师和开发者来说，使用二倍图可以提高图像在高分辨率设备上的清晰度，并提高用户的视觉体验。...DOCTYPE html> <meta http-equiv="X-UA-Compatible...: 在 PC <em>端</em>浏览器中的效果 : 在手机<em>端</em>浏览器效果 :

    66640

    前端学习笔记之CSS网页布局 CSS网页布局

    CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word...，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2、网页布局/排版的三种方式 2.1、标准流 2.2、浮动流 2.3、定位流 二 标准流 标准流的排版方式...> 1.5 浮动流排版练习 #注意：在企业开发中，如何对网页进行布局 #1、垂直方向的布局用标准流布局，水平方向用浮动流布局 #2、从上至下布局 #3、从外向内布局 #4、水平方向可以先划分为一左一右再对左边后者右边进一步布局...> 四 定位流 1、相对定位就是相对于自己以前在标准流中的位置来移动 格式： 　　position：relative 需要配合以下四个属性一起使用 top:20px;...> 固定定位应用场景 网页对联广告 网页头部通栏(穿透效果) ?

    4.8K20

    移动端兼容系列 HTML与CSS兼容

    HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。...致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。...致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。...解决方法：在网页文件的文件头部设置如下代码即可： <meta content="telephone=no" name="format-detection" / 移动端兼容 - 取消电子邮箱识别 具体情形... rem水平方向上的兼容问题 具体情形：移动端布局时，横向使用rem（相对度量单位）时，会在部分手机浏览器当中出现问题

    5.3K60

    移动端布局攻略

    作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。...百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用...} 网易页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果...响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位... 固定宽度布局 主体页面固定宽度，两边留白。

    1.5K60

    02移动端布局

    一、rem      1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem      2、rem 和 em 区别           2.1 rem: root，以根节点（html...，从而控制rem值，从而达到相应效果（其他HTML子元素width等都是rem） function autoRem(){ var html = document.documentElement;...，需要将其编译成css文件，从而间接使用css）                1.1.1 npm install -g less    详见less中文网           1.2 完成less环境安装之后在本地书写需要的...less文件，比如style.less           1.3 打开命令窗口，切换到less文件所在文件夹，编译less成相应css文件     lessc style.less style.css...---->40rem } 三、利用border-sizing布局      1、量尺寸时，width包含住border等，然后正常设置border      2、border-sizing: border-box

    88090

    移动端布局笔记

    移动端布局笔记 概念 英寸 设备的物理尺寸的单位，即屏幕对角线的长度，1英寸 = 2.54 厘米。 分辨率 屏幕分辨率/Resolution 屏幕由多少个像素组成。...设备像素比/DPR 设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）：DPR = 物理像素数 / 逻辑像素数 应用 一般由设计师按照设备像素(Device Pixel)为单位制作设计稿，前端工程师参照相关的设备像素比...拿iPhone 6s来说： image.png 其分辨率为1334*750px，设备尺寸为4.7英寸，可以计算出ppi为326，得知其dpr为2，可以得到对于该设备1个CSS像素数对应4个设备像素点显示...布局视口： 手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。 视觉视口： 屏幕的可视区域，即物理像素尺寸。...所以，在没有缩放的情况下，屏幕的CSS像素宽度其实是指理想视口的宽度，而meta标签： <meta name="viewport" content="width=device-width,minimum-scale

    67420

    .移动端常见布局

    6.1流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。...流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 6.2...flex布局 6.2.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差...IE11或更低版本不支持或仅部分支持 6.2.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。...当我们把父盒子设为flex布局后，子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为

    77331
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券