移动端和响应式学习 @media

最新推荐文章于 2024-05-28 09:14:29 发布
最新推荐文章于 2024-05-28 09:14:29 发布
阅读量132 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/enhenglhm/article/details/120807860
版权

01  viewport

开始时加上viewport  使得宽度自适应 

 

 css

 控制台输入  window.devicePixeRatio  得知1个css像素等于2个设备物理像素·

 @media响应式（可参考看一下bootstrap的官网的响应式）

以背景色为例  @media screen and (max-width:960px) and (min-width:700px)

 @media外接式   media="screen and (max-width:700px)

 media媒体类型  设置为打印，不然默认就是白底黑字

 媒体特性（横屏  竖屏）orienttation:landscape

 图片响应式   img标签和背景图的响应式

 

 

小猿L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端开发-响应式页面
Pari_Yang的博客
11-15 623
学会如何去使用**前端 UI 框架**。
media适配移动端
wsl3465205046的博客
09-18 641
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  /*>=768的设备*/   @media (min-width:768px) {   }   /*>=992的设备*/   ...
媒体查询使用方法@media
abc2346789的博客
05-23 1177
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。 @media 媒体类型and （媒体特性）{你的样式} 注意：使用Media Queries必须要使用“@media”开头...
一些常见的移动端适配方案，你了解吗？
最新发布
油墨香^-^的博客
05-28 25
在项目中，如果设计师要求某一场景不做适配，需为固定的宽高或大小，这时我们就需要利用。方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素。：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。方案是阿里早期开源的一个移动端适配解决方案，引用。是指视窗、视口，即浏览器用来显示网页的那部分区域。新增的一个相对单位，它是一个相对于页面根元素。：允许浏览者缩放到的最大比例，一般设为1.0。的大小，以此来达到适配不同屏幕尺寸的目的。不一定能完全整除，因此有一定的像素差。中定义一遍不同的尺寸，代价有点高。
Vue中如何进行移动端适配与响应式布局？
it_xushixiong的博客
06-13 4856
在Vue.js中，可以使用媒体查询、flexbox布局和第三方库等技术来实现移动端适配和响应式布局。媒体查询可以根据设备的屏幕尺寸来应用不同的样式，而flexbox布局可以用于实现灵活的、响应式的布局。此外，还可以使用第三方库来快速构建响应式布局，例如Bootstrap或Element UI等UI库。移动端适配和响应式布局已经成为Web开发中不可或缺的一部分，因为越来越多的用户正在使用移动设备访问网站。通过使用Vue.js和相关技术，我们可以轻松地实现移动端适配和响应式布局，以提供更好的用户体验。
css关于自媒体@media手机端自适应适配
weixin_43565197的博客
08-08 1334
html, body { height: 100%; }@media only screen and (min-width: 320px) and (max-width: 352px) { html { font-size: 45px; } } @media only screen and (min-width: 352px) and (max-width: 640px) { html { font-size: 50px; } } @media only screen and (min-width: 640
浅谈pc和移动端的响应式的使用
09-22
例如，使用响应式图片（`<img srcset>`和`<picture>`元素）可以根据设备的分辨率提供适当大小的图片，提高加载速度和用户体验。另外，导航栏在小屏幕设备上可能需要折叠成汉堡菜单以节省空间。 总之，响应式设计是...
javascript适合移动端的响应式瀑布流插件
09-01
在移动端，JavaScript能够实现各种复杂的用户界面效果，包括我们今天要讨论的主题——响应式瀑布流插件。响应式设计是现代网页开发的关键，它使得网站能够适应不同设备的屏幕尺寸，提供良好的用户体验。 瀑布流布局...
移动端适配+响应式开发参考代码
06-26
例如设计稿为750，最大宽度为600，则为(750,600)，屏幕大于600之后就不会自适应变大了，也相当于在用@media属性时min-width只设置到了600，没有后面的屏幕尺寸，就不会再变化了 公式：1rem = 浏览器屏幕宽（width）...
移动端响应式框架
08-09
总之，移动端响应式框架是现代Web开发的必备工具，它们通过灵活的布局策略和组件，帮助开发者创建出能在各种设备上无缝工作的网站和应用。随着技术的不断进步，响应式设计的方法和工具也将持续演进，以适应未来更加...
移动Web
m0_73198722的博客
09-03 157
二维，三维，flex布局，移动端适配
【新】移动端（响应式布局）
chenlaining的博客
04-27 433
响应式布局：同一套代码适应 不同的设备屏幕 企业站 或内容很少的 可以改成响应式 电商类内容太多，无法做到响应式，做成 pc一个网站，移动端一个网站 1.媒体查询：max-width（从大到小书写） min-width （从小到大书写） （是区间 不是等于）依旧存在层叠性 <style> /* 视口宽度小于等于768px， 网页背景色是粉色 */ ...
前端基础知识第四章---移动端WEB开发之响应式布局，面试必问的几个问题
m0_60635001的博客
04-16 442
Bootstrap来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。❗️ ❗️❗️ ❗️框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
移动端开发之rem适配布局、媒体查询和Less基础
weixin_63156135的博客
10-20 730
移动端开发之rem适配布局、媒体查询和Less基础
vue react移动端解决1像素边框的适配问题_@media (max--moz-device-pixel-ratio 1
2401_84413092的博客
05-16 357
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】div。
在html样式@media,移动端自适应样式之@media的使用方法
weixin_35079144的博客
06-21 2281
通用手机端样式：@media all and (orientation : portrait) {/*竖屏*/}@media all and (orientation : landscape) {/*横屏*/}指定手机端高度样式：@media screen and (max-width: 750px)@media screen and (min-width: 720px) and (max-wid...
移动端@media自适应常用机型
qq_41188808的博客
06-06 1109
/*Galaxy S5 landscape & portrait*/ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { .heightauto{ min-height: 60vh; } } /*ip...
@media screen解决移动web开发的多分辨率问题
热门推荐
2012013977的博客
09-07 1万+
@media screen解决移动web开发的多分辨率问题
使用rem和@media screen进行移动端设备屏幕自适应布局
Tian_std_scu的博客
10-27 2084
使用rem和@media进行移动端设备屏幕自适应布局,CSS
h5响应式兼容pc和移动端
05-29
HTML5本身并不具备响应式设计的特性，但可以通过使用CSS媒体查询来实现响应式设计，以适应不同的设备和屏幕尺寸。以下是一个简单的示例，可以实现在PC端和移动端上都显示一个完整的页面，并且在移动端上自动适应屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值